为什么 Javascript 只加载一次？

Question

请参考以下脚本

<html>
  <style>
     #div_content {
        height: 200px;
        width: 200px;
        background-color: yellow;
        position: relative;
     }
     #btn_addContent{
       position: absolute;
       left: 0;
       bottom: 0;
     }
    #btn_removeContent{
       position: absolute;
       right: 0;
       bottom: 0;
     }
  </style>

  <body>
     <div id="div_content">
       <p> Existing Content </p>
       <button id="btn_addContent">Add Content </button>
       <button id="btn_removeContent">Remove Content </button>
     </div>
     
  </body>

  <script>
      var divElement = document.getElementById("div_content");

      function addContent(){
         divElement.innerHTML = divElement.innerHTML + "<P> New Content </p>";
      }

      function removeContent(){
         divElement.parentNode.removeChild(divElement);
      }


      var btnAddContent= document.getElementById("btn_addContent");
      btnAddContent.onclick = addContent;

      var btnRemoveContent = document.getElementById("btn_removeContent");
      btnRemoveContent.onclick = removeContent;
      
  </script>

</html>

虽然运行这个脚本，任何功能都是运行也只有一次意味着 Javascript 只加载一次，请做有需要的。即，如果我想 addcontent 我可以一次添加它同时意味着在同一页面上，如果我想删除我无法删除的 div_content 部分，但是，在重新加载时我能够删除 div_content 部分也就是说，对于每次重新加载，我只能添加或删除，不能同时添加或删除，甚至不能添加多个。

Answer 1

innerHTML +=会销毁所有子元素引用（在DOM树中删除并重新添加）。

Use .appendChild

从MDN，innerHTML移除所有元素的children，解析内容字符串并将结果节点分配为children element.

var divElement = document.getElementById("div_content");

function addContent() {
  var elem = document.createElement('p');
  elem.textContent = 'New Content';
  divElement.appendChild(elem);
}

function removeContent() {
  divElement.parentNode.removeChild(divElement);
}
var btnAddContent = document.getElementById("btn_addContent");
btnAddContent.onclick = addContent;
var btnRemoveContent = document.getElementById("btn_removeContent");
btnRemoveContent.onclick = removeContent;

#div_content {
  height: 200px;
  width: 200px;
  background-color: yellow;
  position: relative;
}
#btn_addContent {
  position: absolute;
  left: 0;
  bottom: 0;
}
#btn_removeContent {
  position: absolute;
  right: 0;
  bottom: 0;
}

<div id="div_content">
  <p>Existing Content</p>
  <button id="btn_addContent">Add Content</button>
  <button id="btn_removeContent">Remove Content</button>
</div>

为什么 Javascript 只加载一次？

Why is Javascript loading only once?

javascript

dom-events