无法使用 innerHTML 方法更新另一个 div 元素内的 div？

Question

    <!DOCTYPE html>
<html>
<head>
    <title>Business Card</title>
    <script type="text/javascript">
        window.onload = init;
        function init(){
        var button = document.getElementById("populateFields");
        button.onclick = updateFields;
        }
        function updateFields(){
        document.getElementById("businessCard").innerHTML = "Business Card Info";
        document.getElementById("name").innerHTML = "Name";
        }
    </script>
</head>
<body>
<div id="businessCard">
<div id="name"></div>
</div>
<input type="button" value="populate fields" id="populateFields">
</body>
</html>

我可以看到带有 id 的 div，'businessCard' 更新为 "Business Card Info" 但是，我里面的带有 id 'name' 的 div 没有得到更新.

Answer 1

innerHTML 在外部 div 清除你的内部 div 。在外部 div.

上使用 innerHTML 之前保存内部 div

  window.onload = init;

  function init() {
    var button = document.getElementById("populateFields");
    button.onclick = updateFields;
  }

  function updateFields() {
    //save inner div
    var innerdiv = document.getElementById("name");
    innerdiv.innerHTML = "Name";

    var outerdiv = document.getElementById("businessCard");
    outerdiv.innerHTML = "Business Card Info";
    // add inner div back
    outerdiv.appendChild(innerdiv);

  }

<div id="businessCard">sme
  <div id="name">fdfdf</div>
</div>
<input type="button" value="populate fields" id="populateFields">

Answer 2

因为有人说 innerHTML 是邪恶的，因为它在 DOM 中的后果。另一种解决方案是使用 .firstChild.nodeValue.

window.onload = init;

function init() {
  var button = document.getElementById("populateFields");
  button.onclick = updateFields;
}

function updateFields() {
  document.getElementById("businessCard").firstChild.nodeValue = "Business Card Info";
  document.getElementById("name").firstChild.nodeValue = "Name";
}

<div id="businessCard">
  <div id="name"> </div>
</div>
<input type="button" value="populate fields" id="populateFields">

无法使用 innerHTML 方法更新另一个 div 元素内的 div？

can't update a div inside another div element with innerHTML method?

html

javascript

dom

innerhtml