使用forEach操作HTML DOM修改文本、创建元素并添加类时遇问题求助

你的代码里forEach的用法是没问题的，出错根源是两个关键操作错误：

• 创建DOM元素必须调用document.createElement()，而非通过当前DOM元素（这里的read是<a>标签）调用createElement
• 创建完<span>后，没有将它追加到目标<a>元素中，导致新元素不会渲染到页面上

修正后的JavaScript代码 #

<script>
    let read = document.querySelectorAll(".project-list-content > a");
    // NodeList在现代浏览器原生支持forEach，无需手动转数组
    read.forEach(link => {
        link.textContent = "INCELE";
        let newSpan = document.createElement("span");
        newSpan.classList.add("arrow-right");
        // 将新span插入到a标签内部
        link.appendChild(newSpan);
    });
</script>

补充说明 #

document.querySelectorAll()返回的NodeList在现代浏览器中本身就支持forEach方法，所以var read_array = [...read];这行代码可以直接省略。如果需要兼容极老旧浏览器，才需要用Array.from(read)或展开语法转成数组后再使用forEach，目前主流场景下无需额外处理。

内容的提问来源于stack exchange，提问作者Ömer Düzgün