Question

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

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

现在我们创建了day HTMLDivElement对象是否可以将其打印为字符串？ e.g。

<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

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

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

Answer 4

自从上次回答以来已经过去几年，我发现现在所有主要浏览器都支持.outerHTML（请参阅：https://caniuse.com/#search=outerhtml）。因此，为了获取JS元素的HTML，您可以执行以下操作：

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

console.log(day.outerHTML)

为您提供：<div class="day">Random Text</div>

Answer 5

您需要创建文本节点以为您创建的元素添加文本，如下所示：

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);

Answer 6

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

Answer 7

简单使用outerHTML

函数

var anc = document.createElement("a");
anc.href = "https://developer.mozilla.org?a=b&c=d";
console.log(anc.outerHTML); // output: "<a href='https://developer.mozilla.org?a=b&amp;c=d'></a>"

know more

从HTMLDivElement创建字符串

7 个答案: