DOM操作失败：innerHTML.substring(3,-3)无法更新文本内容求助

问题概述 #

绑定了click事件的makeOverSetup函数能正常执行并输出console.log，但执行到document.getElementById("coded_grove").firstChild.innerText = (x.innerHTML.substring(3,-3))时失效，目标文本无法更新，coded_grove区域也看不到内容。

错误点排查与修复方案 #

1. 子元素判断逻辑错误 #

原代码中document.getElementById("coded_grove").childElementCount.length == 0是错误的：childElementCount本身就是表示子元素数量的数字，没有length属性，这个判断永远为false，导致第一次点击时不会往coded_grove里添加子元素，后续操作firstChild自然找不到目标元素。

2. substring参数使用错误 #

substring(3,-3)的写法不符合预期：substring的第二个参数如果是负数会被自动转为0，实际执行的是substring(3,0)，这会返回空字符串，所以设置innerText后看不到内容。如果要截取从第3位到倒数第3位的内容，应该用slice(3, -3)，slice支持负数索引。

3. 未声明全局变量 #

x、text这些变量没有用let/const声明，会自动挂载到全局作用域，容易引发变量冲突。

4. 冗余的DOM操作逻辑 #

每次点击都尝试修改firstChild的内容，但可以优化逻辑，避免重复添加子元素。

修复后的完整代码 #

function makeOverSetup(ev) {
    // 获取元素属性并赋值
    document.getElementById("styleVals").value = ev.target.getAttribute("style");
    document.getElementById("thisClasses").value = ev.target.getAttribute("class");
    document.getElementById("thisId").value = ev.target.getAttribute("id");
    document.getElementById("tagName").value = ev.target.tagName;

    // 创建临时元素处理HTML内容
    const x = document.createElement("div");
    const text = document.createTextNode(ev.target.outerHTML);
    x.appendChild(text);
    x.style.backgroundColor = "blue";
    console.log(x.innerHTML);

    const codedGrove = document.getElementById("coded_grove");
    // 正确判断是否有子元素
    if (codedGrove.childElementCount === 0) {
        codedGrove.appendChild(document.createTextNode(""));
    }
    // 使用slice替代substring实现从第3位到倒数第3位的截取
    codedGrove.firstChild.innerText = x.innerHTML.slice(3, -3);

    elemCurrentNode = ev.target;
    clicked = true;
}

关键修改说明 #

• 将childElementCount.length改为childElementCount === 0，正确判断容器是否为空。
• 用slice(3, -3)替换substring(3,-3)，实现预期的字符串截取。
• 给临时变量x、text、codedGrove添加const声明，避免全局变量污染。
• 优化DOM元素获取逻辑，把document.getElementById("coded_grove")存为变量，减少重复DOM查询。

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