Question

我想用div动态创建id="xyz"元素。在创建此广告之前，我想删除任何其他div 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，如何删除它们？

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警告，因为它看起来就像你有=，你的意思是==或=== （但在这种情况下，我们的确意味着=）。

动态添加/删除div到html

1 个答案:

卸下：

添加：