Create string from HTMLDivElement

Question

What I would like to be able to do is create a string from a Javascript HTMLElement Object. For example:

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

Now we have create the day HTMLDivElement Object is it possible to make it print as a string? e.g.

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

Answer 1

Variant on Gump's wrapper, since his implementation lifts the target node out of the document.

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( "<" , "&lt;" ).replace( ">" , "&gt;");
outputNode.innerHTML += escapedStr;

Note, attributes like "class" , "id" , etc being stringified properly is questionable.

Answer 2

You can use this function (taken from pure.js)

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

Answer 3

A few years have passed since the last answers. So here is an easier approach:
I found out that .outerHTML is supported by all major browsers now (see caniuse). You can use it to get the HTML of an JS element with ease:

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

This will log: <div class="day">Random Text</div>

Answer 4

You can wrap that element into another element and use innerHTML on it:

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

Answer 5

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

Answer 6

My element was a object with element : HTMLDivElement, so this worked for me.

console.log(row.element.outerHTML);

If you have just HTMLDivElement, then this should work:

console.log(row.outerHTML);

Answer 7

Why would you use createElement if you can also directly parse a string? Like: var string = '<div class="' + class + '">' + text + '</div>';

Answer 8

Simple use the function 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