innerHTMLメソッドで他のdiv要素内のdivを更新できませんか？

Question

「businesscard」が「Business Card Info」で更新されたIDを持つdivを見ることができますが、ID「name」を持つdivは更新されません。

Answer 1

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を使用することです。

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