Question

我的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和child div添加值。但是当我点击button时，嵌套的ul标记会消失，而我的DOM只显示parent值。试图了解这里发生的事情。这是我构建HTML的方式的缺陷吗？如果这是预期的行为，如何在不更改HTML标记关系的情况下修复它？

预期结果应为：value1和value2。现在它只显示value1。

Answer 1

那是因为你正在改写而不是追加。如果您要添加到现有元素，则应使用append()和appendChild()。

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

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

Answer 2

这是预期的。 innerHTML替换元素的内部，因此，孩子将不存在

Answer 3

此外，您可以对父元素使用HTML DOM insertAdjeacentHTML()方法而不是innerHTML。此方法将文本作为HTML插入到指定位置。法定职位值包括：＆＃34; afterbegin＆＃34;，＆＃34; afterend＆＃34;，＆＃34; beforebegin＆＃34;和＆＃34; beforeend＆＃34;。

＆＃13;

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

＆＃13;

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

＆＃13;

DOM同时处理父子div的DOM操作

3 个答案: