appendChild报错排查：CodeSandbox中Vanilla JS环境下root1.appendChild is not a function

错误原因 #

document.getElementsByClassName() 返回的是HTMLCollection类数组对象，而非单个DOM节点，因此不存在appendChild方法——哪怕页面中只有一个匹配该类名的元素，它依然会返回集合形式。

修复方案 #

将获取父容器的代码改为获取单个DOM元素，两种可选方式：

• 从HTMLCollection中取第一个元素：document.getElementsByClassName("root2")[0]
• 使用document.querySelector(".root2")（更简洁，直接返回第一个匹配的元素）

修改后的JavaScript代码 #

let root1 = document.querySelector(".root2"); // 或 document.getElementsByClassName("root2")[0]
let div1 = document.createElement("div");
if(localStorage.getItem("notes")===null){
  localStorage.setItem("notes" , "Hi there!")
}
show();
root1.appendChild(div1);
div1.setAttribute("class", "info");
div1.setAttribute("style", "border : 2px solid black ; padding:9px");
div1.addEventListener("click", function (e) {
  let inputElem = document.getElementsByClassName("inputElem");
  if (inputElem.length === 0) {
    div1.innerHTML = `<input id='text' style='padding:4px' class='inputElem' placeholder='edit text' />`;
    // 创建input后再绑定事件，避免元素未找到报错
    let text = document.getElementById("text");
    text.addEventListener("blur", function () {
      localStorage.setItem("notes", text.value);
      div1.innerHTML = localStorage.getItem("notes");
    });
  }
});
function show() { // 移除未使用的参数e
  div1.innerHTML = localStorage.getItem("notes");
}

对应的HTML代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My Website</title>
  </head>
  <body>
    <div id="root1" class="root2" style="display : flex  ; align-items :center  ; flex-direction : column" >
      one
    </div>
    <script src="./src/index.js" ></script>
  </body>
</html>

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