如何在div内添加元素

Question

Let I've created an element as the following:

var elem= document.createElement("p");

And I've a div#parent element. How can I put elem inside the div#parent ? Is it possible to do without jQuery ?

Answer 1

You have to use appendChild method to add / append a child.

document.getElementById('parent').appendChild( document.createElement("p") );

More Info:

appendChild

Answer 2

Nope, have to use jQuery. That's your only option. :)

Just kidding.

Something like this should work:

var parent = document.getElementById('parent');
parent.appendChild(elem);

It's that simple. Even without using good 'ole jQuery!

Answer 3

Yes, you can use appendChild() :

var parent = document.getElementById('parent');
var elem= document.createElement("p");
parent.appendChild(elem);

Answer 4

Of course you can!

var parent = document.querySelector("div#parent");
//or document.getElementById("parent");
//I doubt speed is an issue so both will work the same
parent.appendChild(elem);

Answer 5

By appendChild()

var elem = document.createElement("p");
var div  = document.getElementById("parent");
div.appendChild(elem);

And to alaborate. jQuery is written in pure Javascript. Anything jQuery do, you can do. That said, there are various quirks etc. that it abstract away.

Answer 6

var parent = document.getElementById("parent");
parent.appendChild(elem);