JavaScript - 使用 innerHTML 创建元素会复制它们。为啥？ [关闭]

Posted 2023-05-07

【中文标题】JavaScript - 使用 innerHTML 创建元素会复制它们。为啥？ [关闭]

【英文标题】：JavaScript - Creating elements with innerHTML duplicates them. Why? [closed]JavaScript - 使用 innerHTML 创建元素会复制它们。为什么？ [关闭]

【发布时间】：2018-07-05 18:39:06

【问题描述】：

在 javascript 中使用 innerhtml 创建元素时，它会复制标签。

let container = document.querySelector(".container");

// This creates two Paragraphs
container.innerHTML = "<p> Paragraph <\p>";

// This only creates one Header 3
container.innerHTML += "<h3> Header 3";

// This doesn't close <strong> correctly and creates two Header 2
container.innerHTML += "<h2><strong> Strong Header<\strong> Not Strong header <\h2> ";

这是一个很好看的 Fiddle：https://jsfiddle.net/hdvxtujn/10/

我发现，如果我只使用打开标签，元素会自行关闭而不会重复。 但是，如果我关闭标签，该元素会用一个空元素复制自己。

怎么会这样以及如何逃脱呢？我还想添加 <strong> 标记，如上一个示例所示。

【问题讨论】：

投票结束，因为问题是由拼写错误引起的。结束标签以/ 开头，而不是\

【参考方案1】：

这是在复制它们，因为您没有正确关闭标签。您在结束标记中使用反斜杠 \ 而不是斜杠 /。此外，您的 h3 结束标记几乎完全丢失了。

查看更新后的jsfiddle。

片段：

let container = document.querySelector(".container");

container.innerHTML = "<p> Paragraph </p>";
container.innerHTML += "<h3> Header </h3>";
container.innerHTML += "<h2><strong> Strong Header</strong> Not Strong header </h2> ";

p 
  font-size: 12px;
  height: 20px;
  margin: 20px;
  background-color:blue;
  color:white


h2 
  font-size: 12px;
  height: 20px;
  margin: 20px;
  background-color:red;
  color:white


h3 
  font-size: 12px;
  height: 20px;
  margin: 20px;
  background-color:green;
  color:white

<div class="container"></div>

【参考方案2】：

你试图用反斜杠关闭标签，而你应该用正斜杠关闭它们。

试试这个：

let container = document.querySelector(".container");

// This creates two Paragraphs
container.innerHTML = "<p> Paragraph </p>";

// This only creates one Header 3
container.innerHTML += "<h3> Header 3";

// This doesn't close <strong> correctly and creates two Header 2
container.innerHTML += "<h2><strong> Strong Header</strong> Not Strong header </h2> ";