使用JavaScript实现点击创建div功能出现异常该如何解决

• 最常见的触发原因是 JS执行时机早于DOM加载完成：如果你的JS代码放在了<head>标签内，或者放在对应按钮、entries容器元素的代码前面，代码执行时document.getElementById无法获取到还没渲染的DOM元素，返回null，就会出现事件绑定失败、创建元素不生效的问题。
• 无需点击就自动创建div的原因是事件绑定语法错误：如果调用addEventListener时给函数加了括号（例如写成addEventListener("click", newEntry())），会直接执行newEntry函数，无需等待点击触发。
• 还有一个容易忽略的点：你创建的是没有内容、没有样式的空div，默认高度为0，就算创建成功也可能看不到，误以为功能没生效。

方案1：调整JS加载位置 #

把你的JS代码放到HTML文件</body>结束标签的前面，确保所有DOM元素加载完成后再执行JS，示例结构：

<body>
  <button class="box4" id="newEntry">NEW</button>
  <div id="entries"></div>
  <!-- JS代码放在所有DOM元素之后 -->
  <script>
    const parent = document.getElementById("entries");
    // 两种绑定方式都可以正常生效
    // 方式1：addEventListener
    document.getElementById("newEntry").addEventListener("click", newEntry);
    // 方式2：onclick赋值
    // document.getElementById("newEntry").onclick = function () {newEntry()};

    function newEntry() {
        var newDiv = document.createElement("div");
        // 给新div加内容和样式，方便看到创建效果
        newDiv.textContent = "新博客条目";
        newDiv.style.padding = "8px";
        newDiv.style.margin = "10px 0";
        newDiv.style.border = "1px solid #eee";
        parent.appendChild(newDiv);
    }
  </script>
</body>

方案2：监听DOM加载完成事件 #

如果需要把JS放在<head>里，就把所有逻辑包裹在DOMContentLoaded事件回调中，等DOM渲染完成后再执行：

document.addEventListener('DOMContentLoaded', function() {
  const parent = document.getElementById("entries");
  document.getElementById("newEntry").addEventListener("click", newEntry);

  function newEntry() {
      var newDiv = document.createElement("div");
      newDiv.textContent = "新博客条目";
      parent.appendChild(newDiv);
  }
})

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