在 Javascript 中使用多个 innerHTML 分隔标签

Question

预期结果是第二行应该是粗体：

正常
加粗

我有这段代码，我想分开 标签。 html 输出是：“粗体”在 之外。是否可以使用多个 innerHTML 来分隔 html 标签？

var content = document.getElementById("content");
content.innerHTML += "it's regular";
content.innerHTML += "<br><b>";
content.innerHTML += "it's bold";
content.innerHTML += "</b>";

<div id="content"></div>

Answer 1

因为你直接写到元素的innerHTML，你的浏览器在四行之间加班（你改变内部HTML）以确保HTML 说得通。在第二行中，您添加了一个未关闭的 <b> 标签，因此浏览器尽其所能确保此更改后有意义：它关闭标签。现在，当您稍后添加文本，然后添加结束标签时 - 关闭已经关闭的标签没有任何意义。

我建议你在这里使用一个中间变量，它可以让你做几乎与以前完全相同的事情。示例如下。

var content = document.getElementById("content");
let newHtml = ''
newHtml += "it's regular";
newHtml += "<br><b>";
newHtml += "it's bold";
newHtml += "</b>";
content.innerHTML = newHtml

<div id="content"></div>

Answer 2

为什么你需要在多行中这样做？只需一行即可完成：

var content = document.getElementById("content");
content.innerHTML += "it's regular<br/><b>it's bold</b>";

但是如果你坚持在多行中这样做，最好使用一个变量并在有效的 html 之后将它附加到你的 html:

var content = document.getElementById("content");
let firstlineHtml= "it's regular";
firstlineHtml += "<br><b>";
firstlineHtml += "it's bold";
firstlineHtml += "</b>";

content.innerHTML = firstlineHtml;

<div id="content"></div>

在 Javascript 中使用多个 innerHTML 分隔标签

Seperate tag using multiple innerHTML in Javascript

html

javascript

innerhtml