Javascript 同时对父和子div进行DOM操作

我的HTML：

<div id="parent">
    <ul id="child"></ul>
</div>
<button>click</button

我试图通过JS为

parent

和

child

div添加值。但当我单击

按钮时，嵌套的
ul
标记消失，我的DOM仅显示
parent
值。试图了解这里发生了什么。这是我构建HTML的方式中的一个缺陷吗？如果这是预期的行为，如何在不更改HTML标记关系的情况下修复它

预期结果应为：值1和值2。现在它只显示value1
 那是因为你过度劳累，而不是增加负担。
如果要添加到已存在的元素，则应使用and

所做的是将标记转录到一个新的标记（这显然意味着过度编写任何以前包含的标记）

总之，您的代码确实可以按预期工作。问题是，您正在尝试应用一种方法，同时尝试实现不同的目标。
这是意料之中的。
innerHTML
替换元素的内部，因此子元素将不存在
而且您可以使用HTML DOM
insertadjacenthtml（）
方法代替父元素的
innerHTML
。此方法将文本作为HTML插入到指定位置。合法位置值为：“
开始后
”、“
结束后
”、“
开始前
”和“
结束前
”


var parent=document.getElementById（'parent'），
child=document.getElementById（'child'），
按钮=document.querySelector（'button'）；
addEventListener（'click'，function（）{
parent.insertAdjacentHTML（'afterbegin'，'value1'）；
child.innerHTML='value2'
}）


单击
是的，您正在设置父级的HTML内容。这将删除父级中当前的所有HTML。是否尝试在子元素之前/之后添加文本？你的HTML很好，但是对JS的修改取决于你想做什么。我会把你想要更改的实际文本放在它自己的元素中这就是答案
var parent = document.getElementById('parent');
var child = document.getElementById('child');
var button = document.querySelector('button');

button.addEventListener('click', function(){
    parent.innerHTML = 'value1';
    child.innerHTML = 'value2';
});