让我们从真正的 MRE 开始,而不是整个代码
function f(){
document.body.innerHTML = '<div>';
document.body.innerHTML += '<span>Hello</span>';
document.body.innerHTML += '</div>';
}
div {
background-color: lightgreen;
}
body {
background-color: red;
}
<body>
<button onclick='f()'>GO</button>
CSS部分是看span是否在div中:如果是,背景应该是绿色的。如果 hello 是红色背景,那么它不在 div 中。
确实不是。
为了理解为什么会这样,让我们考虑一个更简单的
f
function f(){
document.body.innerHTML='<div>Unclosed';
}
您所看到的:绿色背景上的
unclosed
。如果你检查 dom,你会看到一个关闭的 <div>Unclosed</div>
。
因为一旦您将
<div>
添加到 innerHTML
,它所做的就是创建一个 <div></div>
。有一个隐含的结束。
然后当您添加
<span>Hello</span>
时,它会将其添加到 div 之后。
然后添加单个
</div>
没有效果。
innerHTML
中不能包含部分 HTML。引擎将为您完成。
另一种看待它的方式
function f(){
let div=document.getElementById('outer');
let pre=document.getElementById('code');
pre.textContent = '----\nInit\n' + div.innerHTML+'\n\n';
div.innerHTML = '<div>';
pre.textContent += '----\nAfter div\n'+div.innerHTML+'\n\n';
div.innerHTML += '<b>Hello</b>';
pre.textContent += '----\nAfter hello\n'+div.innerHTML+'\n\n';
div.innerHTML += '</div>';
pre.textContent += '----\nAfter /div\n'+div.innerHTML+'\n\n';
}
#outer {
background-color: red;
}
#outer div {
background-color: lightgreen;
}
pre {
background-color: yellow;
}
<button onclick='f()'>GO</button>
<div id=outer></div>
<pre id=code></pre>
这次,我添加了一个(黄色)
pre
,显示 div#outer
内容代码(我更改了 innerHTML
的 div#outer
而不是 body
,以便能够保留我的 pre
。
你可以看到,正如我所说,只要添加
<div>
,代码就变成 <div></div>
。因此 <b>Hello</b>
位于该 div 之外(但当然位于 #outer div 内,代表您的情况下的 body
),并且位于红色背景
嗯,恕我直言,最好的解决方案是使用 dom 操作代码而不是构建 html。但如果您需要/想要像这样处理 HTML,则不应该逐步执行。 您必须一次性更改
innerHTML
。
如果需要,可以使用另一个变量来累积你想要的内容,然后将其放入
innerHTML
function f(){
let s='<div>';
s+='<span>Hello</span>';
s+='</div>';
document.body.innerHTML = s;
}
例如,纠正我最后的代码
function f(){
let div=document.getElementById('outer');
let pre=document.getElementById('code');
pre.textContent = '----\nInit\n' + div.innerHTML+'\n\n';
let s = '<div>';
pre.textContent += '----\nAfter div\n'+div.innerHTML+'\n\n';
s += '<b>Hello</b>';
pre.textContent += '----\nAfter hello\n'+div.innerHTML+'\n\n';
s += '</div>';
pre.textContent += '----\nAfter /div\n'+div.innerHTML+'\n\n';
div.innerHTML = s;
pre.textContent += '----\nAfter innerHTML←s\n'+div.innerHTML+'\n\n';
}
#outer {
background-color: red;
}
#outer div {
background-color: lightgreen;
}
pre {
background-color: yellow;
}
<button onclick='f()'>GO</button>
<div id=outer></div>
<pre id=code></pre>
这次,
Hello
处于绿色背景,因为它位于div
内部。在我们自己添加 Hello
和显式 </div>
之前,没有发生该 div 的隐式关闭。