javascript - 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?

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;