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

Question

My HTML：

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

我的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';
}); 

我正在尝试通过 JS 为parent和childdiv 添加值。但是当我单击button时，嵌套的ul标签消失了，我的 DOM 只显示parent值。试图了解这里发生了什么。这是我构建HTML的方式中的缺陷吗？如果这是预期行为，如何在不更改 HTML 标记关系的情况下修复它？

预期结果应为：值 1 和值 2。现在它只显示值 1。

Answer 1

那是因为你在过度而不是附加。 如果要添加到现有元素，则应改用append()和appendChild()。

.innerHTML所做的是将标记转录为新标记(这意味着显然覆盖任何以前包含的标记(。

总之，您的代码确实按预期工作。问题是，您正在尝试应用一种方法，同时尝试实现不同的东西。

Answer 2

这是意料之中的。innerHTML替换了元素的内部，因此子元素将不存在

Answer 3

您也可以使用 HTML DOMinsertAdjeacentHTML()Method 而不是父元素的innerHTML。此方法将文本作为 HTML 插入到指定位置。法律地位值为："afterbegin"、"afterend"、"beforebegin"和"beforeend"。

var parent = document.getElementById( 'parent' ),
child = document.getElementById( 'child' ),
button = document.querySelector( 'button' );
button.addEventListener( 'click', function() {
parent.insertAdjacentHTML( 'afterbegin', 'value1' );
child.innerHTML = 'value2'
} )

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