从HTMLDivElement创建字符串
问题描述:
我希望能够做的是从Javascript HTMLElement对象创建一个字符串。例如:从HTMLDivElement创建字符串
var day = document.createElement("div");
day.className = "day";
day.textContent = "Random Text";
现在我们创建day
HTMLDivElement对象是有可能使打印作为一个字符串?例如
<div class="day">Random Text</div>
答
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("<" , "<").replace(">" , ">");
outputNode.innerHTML += escapedStr;
注意,属性,如 “阶级”, “ID” 等被字符串化的正确是值得商榷的。
答
如果您还可以直接解析字符串,为什么要使用createElement
? 像:var string = '<div class="' + class + '">' + text + '</div>';
+0
为什么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);
答
您可以使用此功能(从pure.js拍摄)
function outerHTML(node){
return node.outerHTML || new XMLSerializer().serializeToString(node);
}
答
您可以将该元素封装到另一个元素中,并使用其上的innerHTML
:
var wrapper = document.createElement("div");
wrapper.appendChild(day);
var str = wrapper.innerHTML;
简单而有效,正是我所期待的。可惜的是outerHTML方法不被Firefox支持。谢谢 – 2010-11-21 20:27:55