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

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>

I can see div with id, 'businessCard' updated with "Business Card Info" but, I the div inside that with id 'name' is not getting updated.

Once you set businessCard.innerHTML = "Business Card Info", that inner div is gone — Wainage, Mar 23 '16 at 02:42
you can add the inner div back in to the outer div: http://stackoverflow.com/questions/14004117/create-div-and-append-div-dynamically — devlin carnate, Mar 23 '16 at 02:47

Ramanlfc · Accepted Answer · 2016-03-23T03:03:48.730

innerHTML on outer div clears out your inner div . save the inner div before using innerHTML on outer 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">

score 0 · Answer 2 · answered Mar 23 '16 at 03:33

Since some say innerHTML is evil because of it's consequences in DOM. Another solution is to use .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">

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

2 Answers2