如何在 JavaScript 中用 DOM 操作函数替换元素内容

How to substitute element contents with DOM-manipulation-functions in JavaScript?

本文关键字：替换 函数 元素 操作 DOM JavaScript 中用      更新时间：2023-09-26

我有一个元素，看起来像这样：

 <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。

  1. 使用element.innerHTML = '';可以更轻松地完成删除
  2. 生成内容也可以更容易地完成，要么使用 .innerHTML 添加内容，要么缓存元素集合。

    或
  3. 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';
        }
    };
};

这更容易，但很丑陋：

function emptyElement(id) {
    document.getElementById(id).innerHTML = '';
}
function newContent(id, newHTML) {
    document.getElementById(id).innerHTML = newHTML;
}

用法：

newContent('test', '<span>You have </span><em>' + length + '</em><span> characters left.</span>');

试试 

document.getElementById(id).innerHTML = 'new html';

如果你的内容不多，用户 .innerHTML

 <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>

通过使用

document.getElementById('test').innerHTML = '<span>You reached the maximum length</span>';
相关文章：