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

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

 <div id="test">
    <span>You have
    <em>30</em>
    <span> characters left</span>
 </div>

之后，我再次添加内容：

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

这更简单，但很难看：

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>');

newContent（'test'，'您还有'+length+'个字符'）；

使用

element.innerHTML=''可以更轻松地删除

通过使用

.innerHTML

添加内容或缓存元素集合，也可以更轻松地生成内容。

或

elem.parentNode.replaceChild（新元素，元素）#test

元素上的code>将是最简单的方法

使用缓存的DOM元素 演示：

HTML:

HTML:

试一试

---

如果您的内容不是很多user.innerHTML

 <div id="test">
    <span>You have
    <em>30</em>
    <span> characters left</span>
 </div>

你有
30
剩下的字符

可以替换为

<div id="test">
    <span>You reached the maximum length</span>
 </div>

您已达到最大长度

利用

document.getElementById('test').innerHTML = '<span>You reached the maximum length</span>';

document.getElementById（'test'）.innerHTML='您已达到最大长度'；

其他答案说的相同且更快。请学习设置代码格式-缩进4个空格，或在选择代码时单击

{}

。其他答案说的相同且更快。在这种情况下，这并不重要。为什么这不重要？innerHTML是Microsoft标准，而不是W3C标准。除此之外，我还了解到，使用DOM操作函数（尤其是XHTML）始终是最好的主意。因此，对于那些停用样式表或使用屏幕阅读器的访问者来说，隐藏的元素会很烦人。@Sven更新了答案。你真的认为禁用CSS的用户会激活JavaScript吗？你也会使用className，它属于Microsoft的“all”模型，而不是DOM（W3C）。我读到，动态HTML的这个模型已经被弃用，应该被DOM（德语参考：）取代。提到的唯一例外是“向后兼容性”（但我认为这已经不算了，这篇文章是5年前写的）@Sven

className

是其中的一部分。你使用的是五年前的现代资料。它仍然提到IE 4和FF 1。。。扔掉那个引用，改用MDN：。好吧，到目前为止，我还没有找到一个可比较的源代码，它告诉你主浏览器支持哪个版本的浏览器。例如，我试过了，但这里的测试仅限于FF4版本，例如，。。。

<input type="text" id="input">
<div id="test"></div>

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);
        }
    };
};

.hidden {display:none;}

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

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';
        }
    };
};

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

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