我有一个元素,看起来像这样:
<div id="test">
<span>You have
<em>30</em>
<span> characters left</span>
</div>
我想将其替换为:
<div id="test">
<span>You reached the maximum length</span>
</div>
或与
<div id="test">
<span>Your text is </span>
<em>30</em>
<span> characters to long</span>
</div>
有没有办法用一组新元素替换所有子元素?目前我正在使用以下功能首先删除所有元素:
function emptyElement(id) {
while(document.getElementById(id).hasChildNodes()) {
document.getElementById(id).removeChild(document.getElementById(id).firstChild)
}
}
之后我再次添加内容:
span1 = document.createElement("span");
span1.appendChild(document.createTextNode("You have "));
len = document.createElement("em");
len.appendChild(document.createTextNode(length));
span2 = document.createElement("span");
span2.appendChild(document.createTextNode(" characters left."));
// remove child elements
emptyElement('test');
// Add content
document.getElementById('test').appendChild(span1);
document.getElementById('test').appendChild(len);
document.getElementById('test').appendChild(span2);
我的印象是(1)删除子元素,(2)生成内容和(3)将新元素添加到 div 可能有一种更简单的方法。