动态添加/移除HTML中的div

Question

我想动态创建一个id为“xyz”的

元素。在创建之前，如果存在任何其他id为“xyz”的

元素，我想要将其删除。我该怎么做？

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，则将它们全部删除？

- jslearner

Answer 1

移除：

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

或者如果你不能控制文档且认为它可能格式不正确：

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

（见下面的替代方案。）

但是，只有在处理无效的HTML文档时才需要使用循环；如果您控制文档，则没有必要，只需确保文档有效。 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);
}

...虽然这可能会引起各种工具的“lint warnings”，因为它看起来像是你在意思上用=而不是==或===（但在这种情况下，我们确实需要用=）。

- T.J. Crowder

---

谢谢：如果有多个id = xyz的div，那么您所描述的删除代码会删除所有这些div吗？ - jslearner

@jslearner：有趣的是，我刚刚添加了一条关于这个的注释。 :-) - T.J. Crowder

@jslearner 给不同的 div 对象分配相同的 id 没有太多意义。id 是用于获取每个对象的属性。如果您给它们相同的 id，那么您如何单独获取它们中的每一个？尝试创建一个包含这些 div 的 div 并将该 div 分配 id。 - Oralet