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'更新了“名片信息”但是，我内部带有id'name'的div没有得到更新。

Answer 1

外部div上的

innerHTML清除了你的内部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。

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: