从HTMLDivElement创建字符串

我希望能够做的是从Javascript HTMLElement对象创建一个字符串。例如：从HTMLDivElement创建字符串

var day = document.createElement("div"); 
day.className = "day"; 
day.textContent = "Random Text";

现在我们创建day HTMLDivElement对象是有可能使打印作为一个字符串？例如

<div class="day">Random Text</div>

来源

2010-11-21 Matthew Brown

Gump包装器的变体，因为他的实现将目标节点从文档中提取出来。

function nodeToString (node) { 
    var tmpNode = document.createElement("div"); 
    tmpNode.appendChild(node.cloneNode(true)); 
    var str = tmpNode.innerHTML; 
    tmpNode = node = null; // prevent memory leaks in IE 
    return str; 
}

要打印在屏幕上生成的字符串（RE：转义）

var escapedStr = nodeToString(node).replace("<" , "&lt;").replace(">" , "&gt;"); 
outputNode.innerHTML += escapedStr;

注意，属性，如 “阶级”， “ID” 等被字符串化的正确是值得商榷的。

来源

2010-11-21 19:10:05 BGerrissen

简单而有效，正是我所期待的。可惜的是outerHTML方法不被Firefox支持。谢谢 – 2010-11-21 20:27:55

如果您还可以直接解析字符串，为什么要使用createElement？像：var string = '<div class="' + class + '">' + text + '</div>';

来源

2010-11-21 18:53:31

为什么op可能需要这样做的原因很多......就像我一样。 – Madbreaks 2012-05-24 20:34:03

您需要创建一个文本节点添加文本为您创建的元素是这样的：

var day = document.createElement("div"); 
day.className = "day"; 
// create text node 
var txt = document.createTextNode('Random Text'); 
// add text to div now 
day.appendChild(txt); 
// append to body 
document.body.appendChild(day);

来源

2010-11-21 18:53:41 Sarfraz

您可以使用此功能（从pure.js拍摄）

function outerHTML(node){ 
return node.outerHTML || new XMLSerializer().serializeToString(node); 
}

来源

2010-11-21 18:55:05

您可以将该元素封装到另一个元素中，并使用其上的innerHTML：

var wrapper = document.createElement("div"); 
wrapper.appendChild(day); 
var str = wrapper.innerHTML;

来源

2010-11-21 18:58:30 Gumbo

从HTMLDivElement创建字符串

回答

相关问题