显示地理位置跳出div

问题描述 投票：0回答：1
javascript geolocation
1个回答
0
投票

让我们从真正的 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 的隐式关闭。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.