JavaScript点击触发按钮替换后无法向指定div追加新按钮问题求助

• 你已经通过document.getElementById('buttonDiv')获取到了目标容器的DOM对象，并存入了变量buttonDivEl中，该变量是全局作用域下的独立变量，不是document对象的内置属性，因此document.buttonDivEl属于无效取值，无法获取到目标容器对象，调用appendChild方法自然会报错。

直接使用已经定义好的buttonDivEl变量调用appendChild方法即可，不需要在前面加document.前缀。

JavaScript 代码 #

var buttonDivEl = document.getElementById('buttonDiv');
var startFunctionEl = document.getElementById('startFunction');

startFunctionEl.onclick = myFunction;

function myFunction() {
    startFunctionEl.remove();
    var createButton = document.createElement("button");
    createButton.innerHTML = "my new button";
    // 去掉document.前缀，直接使用已获取的DOM变量
    buttonDivEl.appendChild(createButton);
}

HTML 代码 #

按照你描述的「startFunction按钮放在buttonDiv容器内」的结构，修正后的HTML如下：

<div id="buttonDiv">
  <button id="startFunction">Click</button>
</div>

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