не может обновить div внутри другого элемента div с помощью метода innerHTML?

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

Я могу видеть div с id, 'businessCard', обновленный с помощью «Информация о визитной карточке», но, я внутри, что с id 'name' не обновляется.не может обновить div внутри другого элемента div с помощью метода innerHTML?

источник

2016-03-23 tharun139

После того, как вы установите businessCard.innerHTML = "Business Card Info", что внутренний DIV ушел – Wainage

Есть ли способ .. или единственный способ отделить Див-х годов? – tharun139

вы можете добавить внутренний div обратно во внешний div: http://stackoverflow.com/questions/14004117/create-div-and-append-div-dynamically –

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

источник

2016-03-23 02:55:39 Ramanlfc

Поскольку некоторые говорят 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">

источник

2016-03-23 03:33:53 rmondesilva

не может обновить div внутри другого элемента div с помощью метода innerHTML?

ответ

Смежные вопросы