不能用 innerHTML 方法更新另一个 div 元素内的 div？答案

【问题标题】：can't update a div inside another div element with innerHTML method?不能用 innerHTML 方法更新另一个 div 元素内的 div？
【发布时间】：2016-03-23 02:40:45
【问题描述】：

    <!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 为 'businessCard' 的 div 用“名片信息”更新了，但是我里面的 id 为 'name' 的 div 没有更新。

【问题讨论】：

一旦你设置了businessCard.innerHTML = "Business Card Info"，那个内部的div就消失了
有什么办法..还是唯一的办法就是分开div？
您可以将内部 div 添加回外部 div：stackoverflow.com/questions/14004117/…

标签： javascript html dom innerhtml

【解决方案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">

【讨论】：

【解决方案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">

【讨论】：