Question

使用innerHTML在JavaScript中创建元素时，它会复制标记。

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> ";

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

我已经想通了，如果我只使用一个开放标签，那么该元素会自行关闭而不会重复。但是，如果我关闭标记，该元素将使用空元素复制自身。

怎么这样以及如何逃避这个？我还想添加最后一个示例中显示的<strong>标记。

Answer 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>

Answer 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> ";

JavaScript - 使用innerHTML创建元素会重复它们。为什么？

2 个答案: