Create div element and dynamically add child elements on it

javascript, jquery

Solution

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);
});

Problem

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

Original source