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

Posted 2023-05-07

【中文标题】在Javascript中使用多个innerHTML分隔标签

【英文标题】：Seperate tag using multiple innerHTML in Javascript

【发布时间】：2021-10-08 11:00:41

【问题描述】：

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

常规粗体

我有这段代码，我想分隔 标记。 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>   

【问题讨论】：

只需添加content.innerHTML = '';作为代码中的第二行

【参考方案1】：

因为您是直接写到元素的innerHTML，所以您的浏览器在四行之间加班（您更改innerHTML）以确保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>   

【讨论】：

另一种方法是简单地做var content = document.getElementById("content"); content.innerHTML = `it's regular<br/><b>it's bold</b>`;

确实如此。如果是一个选项，他可以轻松做到document.getElementById("content").innerHTML = "it's regular<br/><b>it's bold</b>"

【参考方案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>