从HTMLDivElement创建字符串

Question

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

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

现在我们创建dayHTMLDivElement对象是否可以将其打印为字符串？例如

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

Answer 1

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:escaped)

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

注意,像"class","id"等属性正确地进行字符串化是值得怀疑的.

Answer 2

你可以使用这个函数(取自pure.js)

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

Answer 3

自上次回答以来已经过去了几年。所以这里有一个更简单的方法：
我发现.outerHTML现在所有主要浏览器都支持它（参见caniuse）。您可以使用它轻松获取 JS 元素的 HTML：

// Create a sample HTMLDivElement
var Day = document.createElement("div");
Day.className = "day";
Day.textContent = "Random Text";

// Log the element's HTML to the console
console.log(Day.outerHTML)

这将记录： <div class="day">Random Text</div>

Answer 4

您可以将该元素包装到另一个元素中并innerHTML在其上使用:

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