Question

请参阅以下SCRIPT

<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只加载一次才能满足需要。即，如果我想添加内容，我可以一次添加它并且同时意味着在同一页面上，如果我想删除div_content部分，我无法这样做，但是，在新的relaod上我能够删除div_content部分对于每次重新加载，我只能添加或删除两者，甚至不能多次添加。

Answer 1

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

使用.appendChild

从MDN ，innerHTML删除所有元素children，解析内容字符串并将结果节点指定为{{1} } children。

＆＃13;

element

＆＃13;

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;

＆＃13;

#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;
}

＆＃13;

为什么javascript只加载一次？

1 个答案: