从HTMLDivElement创建字符串

Question

我想要做的是从Javascript HTMLElement对象中创建一个字符串。例如：

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

现在我们已经创建了day HTMLDivElement对象，能否将其打印为字符串？例如：

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

- Matthew Brown

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

要在屏幕上打印结果字符串（关于转义）

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

请注意，属性如“class”、“id”等是否被正确转换为字符串是值得怀疑的。

- BGerrissen

---

简单而有效，正是我所寻找的。遗憾的是，Firefox不支持outerHTML方法。谢谢。 - Matthew Brown

Answer 2

你可以使用这个函数（从pure.js中获取）

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

- Christoffer Klang

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">随机文本</div>

- Panni

---

outerHTML！当然！先生，您真是个天才。 - thedude12

Answer 4

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

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

- Gumbo

Answer 5

我的元素是一个带有 element : HTMLDivElement 的对象，所以这对我很有效。

console.log(row.element.outerHTML);

如果您只有一个 HTMLDivElement，那么这应该可以工作：

console.log(row.outerHTML);

- muditrustagii

Answer 6

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

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

- Sarfraz

Answer 7

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

- seymar

---

有很多原因为什么操作可能需要这样做...就像我一样。 - Madbreaks

Answer 8

只需简单使用函数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>"

了解更多

- MD SHAYON