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 2nd version to work?
The later is pure html for an element while first is the object. For the first, you need appendChild while for the later, you need 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;
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>');
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.
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;