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

Fiddle

- JunM

---

@wared - 我只是想知道是否可以在使用document.createElement()创建的元素上追加元素。而不是在我使用HTML创建的元素上。 - JunM

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

- Jokey

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

- dooxe

---

使用 document.createElement('div' 创建的元素无法追加内容吗？ - JunM

@JunM 它不是被追加，而是被创建 :) 你必须自己将它插入到 DOM 树中。实际上，document.createElement() 无法自行决定应该在哪里附加 DIV。 - user1636522

@JunM 刚才所说的内容的补充：http://www.w3schools.com/js/js_htmldom.asp - dooxe

@dooxe 感谢您的解释，+1。我将只标记Jokey的回答为最佳答案。他的积分仍然很低，但回答正确了。 - JunM

Answer 3

你需要在你的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/

- Cédric Babeix

Answer 4

你可以像这样使用jQuery：

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

- Bhojendra Rauniyar

Answer 5

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

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

- Souradeep Nanda