Javascript 从 HTMLDivElement 创建字符串
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4239587/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create string from HTMLDivElement
提问by Matthew Brown
What I would like to be able to do is create a string from a Javascript HTMLElement Object. For example:
我希望能够做的是从 Javascript HTMLElement 对象创建一个字符串。例如：
var day = document.createElement("div");
day.className = "day";
day.textContent = "Random Text";
Now we have create the dayHTMLDivElement Object is it possible to make it print as a string? e.g.
现在我们已经创建了dayHTMLDivElement 对象是否可以将其打印为字符串？例如
<div class="day">Random Text</div>
回答by BGerrissen
Variant on Gump's wrapper, since his implementation lifts the target node out of the document.
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;
}
To print the resulting string on screen (re: escaped)
在屏幕上打印结果字符串（重新：转义）
var escapedStr = nodeToString( node ).replace( "<" , "<" ).replace( ">" , ">");
outputNode.innerHTML += escapedStr;
Note, attributes like "class" , "id" , etc being stringified properly is questionable.
请注意，像 "class" 、 "id" 等被正确字符串化的属性是有问题的。
回答by Christoffer Klang
You can use this function (taken from pure.js)
你可以使用这个函数（取自 pure.js）
function outerHTML(node){
return node.outerHTML || new XMLSerializer().serializeToString(node);
}
回答by Gumbo
You can wrap that element into another element and use innerHTMLon it:
您可以将该元素包装到另一个元素中并innerHTML在其上使用：
var wrapper = document.createElement("div");
wrapper.appendChild(day);
var str = wrapper.innerHTML;
回答by Panni
Since a few years have passed since the last answers I found that .outerHTMLseems now to be supported by all major browsers (see: https://caniuse.com/#search=outerhtml).
So in order to get the HTML of an JS element you can do the following:
自上次回答以来已经过去了几年，我发现.outerHTML现在似乎所有主要浏览器都支持（请参阅：https: //caniuse.com/#search=outerhtml）。因此，为了获取 JS 元素的 HTML，您可以执行以下操作：
var day = document.createElement("div");
day.className = "day";
day.textContent = "Random Text";
console.log(day.outerHTML)
Which gives you: <div class="day">Random Text</div>
这给了你： <div class="day">Random Text</div>
回答by Sarfraz
You need to create text node to add text for your created element like this:
您需要创建文本节点来为您创建的元素添加文本，如下所示：
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);
回答by seymar
Why would you use createElementif you can also directly parse a string?
Like: var string = '<div class="' + class + '">' + text + '</div>';
createElement如果您也可以直接解析字符串，为什么要使用？喜欢：var string = '<div class="' + class + '">' + text + '</div>';
