gpt4 book ai didi

javascript - 无法使用innerHTML方法更新另一个div元素内的div?

转载 作者:行者123 更新时间:2023-12-03 07:22:10 25 4
gpt4 key购买 nike

    <!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 已更新为“名片信息”,但是,其中 id 为“姓名”的 div 并未更新。

最佳答案

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

关于javascript - 无法使用innerHTML方法更新另一个div元素内的div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36168862/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com