创建div元素并在其上动态添加子元素

Question

如何在javascript中创建元素并在其上动态添加元素？

如果我在HTML上创建了这个元素并在其上动态追加元素,它就可以了.

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

但这不起作用:

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

附加代码:

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

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

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

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

小提琴

Answer 1

这是你的代码:

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

Answer 2

您必须调用appendChild(element)才能添加元素。例如：

var h1 = document.createElement("h1");
h1.textContent = "Title";
document.body.appendChild(h1);

在您的情况下，这是：

var parent = document.body; // or another one like document.getElementById("othercontainer")
parent.appendChild(container);