我有一个元素,看起来像这样:
<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。
最佳答案
- 使用
element.innerHTML = '';
可以更轻松地完成删除
- 通过使用
.innerHTML
添加内容或缓存元素集合,也可以更轻松地生成内容。
或 elem.parentNode.replaceChild(new_elem, elem);
在#test
元素上将是最简单的方法。
使用缓存的 DOM 元素
演示:http://jsfiddle.net/aKASN/1/
HTML:
<input type="text" id="input">
<div id="test"></div>
JavaScript:
window.onload = function() {
// References
var limit_reached = document.createElement('div');
limit_reached.id = 'test';
limit_reached.innerHTML = 'You reached the maximum length';
var chars_left = document.createElement('div');
chars_left.id = 'test';
chars_left.innerHTML = 'You have <em id="number_of_chars">30</em> characters left';
document.getElementById('input').onkeyup = function() {
var char_count = this.value.length;
var limit = 20;
var test = document.getElementById('test');
if ( char_count > limit ) {
test.parentNode.replaceChild(limit_reached, test);
} else {
chars_left.getElementsByTagName('em')[0].innerHTML = limit - char_count;
test.parentNode.replaceChild(chars_left, test);
}
};
};
使用隐藏元素(推荐)
另一种方法,我推荐之前的方法,是将所有元素放在 中,并使用 CSS 隐藏未使用的消息。这比 DOM 操作更有效,因为不必一遍又一遍地创建元素。
演示:http://jsfiddle.net/aKASN/
CSS:
.hidden {display:none;}
HTML:
<input type="text" id="input">
<div><!-- Original id="test" -->
<span id="charsleft" class="hidden">
You have
<em id="number_of_chars">30</em>
characters left
</span>
<span id="limit_reached" class="hidden">
You reached the maximum length
</span>
</div>
JavaScript:
window.onload = function() {
// References
var chars_left = document.getElementById('charsleft');
var number_of_chars = document.getElementById('number_of_chars');
var limit_reached = document.getElementById('limit_reached');
var input = document.getElementById('input');
input.onkeyup = function() {
// Example value:
var char_count = input.value.length;
// Example: 20 character limit
if ( char_count > 20 ) {
chars_left.className = 'hidden';
limit_reached.className = '';
} else {
chars_left.className = '';
number_of_chars.innerHTML = 20 - char_count;
limit_reached.className = 'hidden';
}
};
};
关于javascript - 如何用 JavaScript 中的 DOM 操作函数替换元素内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10138172/