Javascript 向html动态添加/删除div

我想用

id=“xyz”

动态创建一个

div

元素。现在，在创建此文件之前，我想删除任何其他具有

id=“xyz”

的

div

，如果它存在的话。我怎么做

var msgContainer = document.createElement('div');
msgContainer.setAttribute('id', 'xyz');  //set id
msgContainer.setAttribute('class', 'content done'); // i want to add a class to it. it this correct?

var msg2 = document.createTextNode(msg);
msgContainer.appendChild(msg2);
document.body.appendChild(msgContainer);
}

执行上述代码之前，如果存在id=xyz的所有div，如何删除它们？

删除： 或者，如果您不控制文档，并且认为它可能存在格式错误：

var div = document.getElementById('xyz');
while (div) {
    div.parentNode.removeChild(div);
    div = document.getElementById('xyz');
}

（以下为备选方案。）

但是您只需要循环无效的HTML文档；如果您控制文档，则无需确保文档有效<代码>id值必须是唯一的。然而，我们可以看到很多文档在它们不存在的地方

添加：

---

如果您不喜欢上面“我的循环”中的代码复制，并且您认为需要该循环，您可以执行以下操作：

var div;
while (!!(div = document.getElementById('xyz'))) {
    div.parentNode.removeChild(div);
}

或

---

…尽管最后一个可能会从各种工具中生成lint警告，因为它看起来像是

=

，您的意思是

==

或

==

（但在本例中，我们实际上是指

=

）.

谢谢：如果有id=xyz的多个div，该怎么办？u描述的删除代码是否会删除id=xyz的所有divxyz@jslearner：有趣的是，我只是添加了一条关于这个的注释。：-）@jslearner为不同的div对象提供相同的id没有多大意义。id是用于获取每个对象的属性。如果你给他们相同的id，你将如何分别得到他们？尝试创建一个包含这些div的div，并为该div提供id。

var msgContainer = document.createElement('div');
msgContainer.id = 'xyz';             // No setAttribute required
msgContainer.className = 'someClass' // No setAttribute required, note it's "className" to avoid conflict with JavaScript reserved word
msgContainer.appendChild(document.createTextNode(msg));
document.body.appendChild(msgContainer);

var div;
while (!!(div = document.getElementById('xyz'))) {
    div.parentNode.removeChild(div);
}

var div;
while (div = document.getElementById('xyz')) {
    div.parentNode.removeChild(div);
}