使用ES6 JavaScript向已有标签新增div无显示问题咨询

问题原因 #

• 核心错误：write() 是 document 全局对象的专属方法，你通过 getElementById() 拿到的是普通DOM元素，不存在该方法，代码执行时会直接抛出 Uncaught TypeError: document.getElementById(...).write is not a function 错误，所以没有任何元素生成。
• 额外注意：就算你改为调用 document.write() 也不推荐，若在页面加载完成后执行该方法，会直接清空覆盖整个页面的原有内容，不符合你向指定容器追加元素的需求。

正确实现方案 #

方案1：innerHTML 拼接（写法简单） #

先把所有要插入的HTML字符串拼接完成，再一次性赋值给目标容器的innerHTML属性，避免多次操作DOM影响性能：

let htmlStr = '';
for(let i = 1 ; i <= 10 ; i++){
    for(let j =1 ; j <= 10 ; j++){
        const result = i * j;
        htmlStr += `<div class='box'>${result}</div>`;
    }
}
document.getElementById("wrap").innerHTML = htmlStr;

你的HTML代码无需修改：

<div id="wrap"></div>

方案2：标准DOM操作（更安全，避免XSS风险） #

通过createElement创建元素节点，再追加到目标容器中：

const wrap = document.getElementById("wrap");
for(let i = 1 ; i <= 10 ; i++){
    for(let j =1 ; j <= 10 ; j++){
        const result = i * j;
        const div = document.createElement('div');
        div.className = 'box';
        div.textContent = result;
        wrap.appendChild(div);
    }
}

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