Create div element and dynamically add child elements on it

Question

How do I create an element in javascript and dynamically add elements on it?

If I have this created element on HTML and dynamically append elements on it, it works just fine.

<!-- THIS WILL WORK -->
<div id="wrapper"></div>

But this will not work:

// THIS WILL NOT WORK
var container = document.createElement('div');
container.id = "wrapper";

Additional code:

var html = '<div><ul>';

for(var i=1; i<=40; i++){
    html+= "<li>Testing: "+i+"</li>";
}

html+= '</ul></div>';

$('#wrapper').append(html);

Fiddle

Answer 1

Here's your code:

$(function() {
var container = document.createElement('div');
container.id = "wrapper";

$('body').append(container);

var html = '<div><ul>';

for(var i=1; i<=40; i++){
    html+= "<li>Testing: "+i+"</li>";
}

html+= '</ul></div>';

$('#wrapper').append(html);
});