如何使用JavaScript不直接修改HTML动态更新ul标签内容

代码存在的问题 #

• document.querySelectorAll() 返回的是符合选择器的所有DOM元素组成的NodeList类数组集合，并非单个DOM元素，直接对集合调用.innerText属性无法读取到元素文本，返回值为undefined，对集合的.innerText赋值也不会生效，这是你的代码没有达到预期的核心原因。
• 你原有逻辑的写法默认会把所有li的内容合并处理，如果你是要为每个li的原有文本追加感叹号，需要逐个遍历li元素单独处理。

修正代码 #

场景1：给每个li的原有文本末尾追加感叹号 #

<div>
    <ul class="list">
        <li>JavaScript</li>
        <li>Ruby</li>
        <li>Python</li>
    </ul>
</div>
<script>
    // 拿到所有li元素集合
    const liElements = document.querySelectorAll('.list > li');
    // 遍历集合逐个处理
    liElements.forEach(li => {
        li.innerText += '!';
    })
</script>

运行后最终列表内容为：JavaScript!、Ruby!、Python!。

场景2：合并所有li的文本后统一替换每个li的内容 #

如果你是要把所有li的文本拼接后加感叹号，再统一赋值给每个li，调整代码如下：

<div>
    <ul class="list">
        <li>JavaScript</li>
        <li>Ruby</li>
        <li>Python</li>
    </ul>
</div>
<script>
    const liElements = document.querySelectorAll('.list > li');
    let totalText = '';
    // 先拼接所有文本
    liElements.forEach(li => {
        totalText += li.innerText;
    })
    const finalText = totalText + '!';
    // 统一给所有li赋值
    liElements.forEach(li => {
        li.innerText = finalText;
    })
</script>

运行后每个li的内容都为JavaScriptRubyPython!。

内容的提问来源于stack exchange，提问作者jsnerd