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

Fiddle

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

Answer 3

您可以像这样使用jquery：

$(document).append('<div id="wrapper" />');

Answer 4

您需要在HTML页面中插入包装。

这样可行：

HTML：

<div id="layout">

</div>

JS：

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

var layout = document.getElementById('layout');
layout.appendChild(container);

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

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

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

container.innerHTML = html;

http://jsfiddle.net/Zd2rw/

Answer 5

这是一种不安全的做法。您可以将innerHTML 作为字符串进行编辑。

hd = document.getElementsByTagName('head').item(0)
hd.innerHTML += '<style>body {background-color:blue;}</style>'

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

5 个答案: