我想动态地创建一个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);
}
解决方法
删除：
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警告,因为它看起来像你有=你的意思==或===(但在这种情况下,我们真的做的意思是=).
