appendChild + createElement

Question

What's the difference between:

var div = document.createElement('div');//output -> [object HTMLDivElement]

document.getElementById('container').appendChild(div);

and:

var div = '<div></div>';

document.getElementById('container').appendChild(div);//output -> <div></div>

Shouldn't both be the same? And if not, how do I get the second version to work?

Trichinosis

Answer 1

The latter is simply a string containing HTML while the first is an object. For the first, you need appendChild while for the second, you need to append to innerHTML.

shouldn't both be the same? and if not, how do i get the 2nd version to work?

var div = '<div></div>';
document.getElementById('container').innerHTML += div;

Mortify

if you're happy with the answer you should tick it as accepted. note that += is the operator that closest approximates the append behavior, not =. – Ad

"The later is pure html...". It's just a string. – Pulmonic

You can also use insertAdjacentHTML('beforeend', div) in second case – Delamination

Answer 2

With your JS/DOM engine, calling Element.appendChild with a string as an argument causes a new Text node to be created then added.

Your first example creates a <div> element. Your second example creates a text node with <div></div> as its contents.

Your second example is equivalent to:

var div = '<div></div>';

document.getElementById('container').appendChild(document.createTextNode(div));//output -> <div></div>

As Sarfraz Ahmed mentioned in his answer, you can make the second example work how you want it to work by writing:

var div = '<div></div>';

document.getElementById('container').innerHTML = div;

Eloiseloisa

is there really any browser where passing a string argument causes a new text node to be created and added? in firefox and chrome, this just causes an illegal argument exception, and nothing is added: jsbin.com/omofo3/edit – Ad

@David Hedlund, I was explaining the behaviour the poster was experiencing. I didn't test any browsers (I probably should have). You're right; this seems to be an exceptional case. – Eloiseloisa

Answer 3

appendChild really does expect a HTMLDomNode of some kind, such as a HTMLDivElement, and not a string. It doesn't know how to deal with a string. You could do

document.getElementById('container').innerHTML += div;

but I really prefer the first version; and I'd rely more on it to behave the same across browsers.

Ad

Are there any disadvantages to this method? It's how I typically achieve this. – Lightman

this is not preferred as this removed the event listeners and also the state of previous elements. – Granular

Answer 4

appendChild is expecting an element so when you send it text, it doesn't know what to do. You might want to look into using a javascript library to ease some of that work, such as jQuery. Your code would be:

$('#container').append('<div></div>');

Mcmahon

There so needs to be a 'hold on, 2 other people are typing answers right now' message when typing up the answer, lol – Mcmahon

while i think it would be overhead to include jquery only for this, it's can still be argued that if OP was already using jQuery, this might very well have been the solution closest to what OP wanted, so i think it's a worthy alternative, that shouldn't be lost just because somebody else has offered a solution already. – Ad

Answer 5

The simplest solution and support all browsers is:

var div = '<div></div>';
var parser = new DOMParser();
var myDiv = parser.parseFromString( html, "text/xml" );

Another solution may be:

var div = '<div></div>';
var tmpDiv = document.createElement('div');
    tmpDiv.innerHTML = div;

    elDiv = tmpDiv.childNodes[0]; //Now it can be used as an element

Omora

Answer 6

You can also use these to append/prepend an element to the DOM respectively:

var elem = document.documentElement.appendChild(document.createElement(element));
var elem = document.documentElement.prepend(document.createElement(element));

and use the elem variable to target the element (e.g):

elem.style.display = "block";
elem.style.remove();
elem.style.id = ...;

etc.

Christlike