如何将JavaScript DOM元素（及其整个结构）转换为字符串（不使用jQuery）？ ..并在页面上重新显示为文本？

Question

I'm currently trying to grab a DOM Element (and its entire sub-elements) and store it as string, so that I could re-display it as plain text on the page. Similar to this below:

// Get DOM Element
var x = document.getElementById("para1");

// Create a new DOM Element and display x as text on the page
var div = document.createElement('div');
div.textContent = x;
document.body.appendChild(div); 

I was expecting I would get something like <ul><li>One</li><li>Two</li><li>Three</li></ul> ; however, what I got instead was [object HTMLUListElement] .

Here's the fiddle: http://output.jsbin.com/wesosu/1

Answer 1

Use x.outerHTML to get the HTML content including the element itself

var div = document.createElement('div');
div.textContent = x.outerHTML; // x.innerHTML instead if you only want the contents
document.body.appendChild(div);