appendChild + createElement

javascript html appendchild
user317005 picture user317005 · May 24, 2010 · Viewed 86.5k times · Source

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

Sarfraz picture Sarfraz · May 24, 2010

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;

Related questions

Append multiple items in JavaScript

I have the following function and I am trying to figure out a better way to append multiple items using appendChild(). When the user clicks on Add, each item should look like this: <li> <input type="checkbox"&…

Read More
How to insert a line break with javascript?

The Submit Form I have has the name, email, and phone number fields. Of course, I want to insert line break between the three. I tried to insert a line break between all three, but only generated one at the …

Read More
getElementsByClass and appendChild

just brushing up on my javascript skills and trying to figure out why getElementsByClass isn't working for my code. The code is pretty simple. Upon clicking a button "clicky", the script will create a child h1 element of div. It …

Read More