动态添加/删除div到html

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警告,因为它看起来像=你的意思==或===(但在这种情况下,我们确实有意思=).