JavaScript中使用innerHTML创建元素为何出现标签重复？

我之前也踩过类似的坑，浏览器对HTML的自动解析修复逻辑有时候确实会超出预期，咱们一步步拆解问题原因和解决办法：

为什么会出现标签重复/意外元素？ #

核心原因是浏览器的HTML解析器会自动修正不规范的HTML代码，但这种修复逻辑在你使用错误标签语法或者多次追加innerHTML时，会产生意外结果：

1. 错误的闭合标签：比如你写的</\p>或者</\strong>，这不是标准的HTML闭合格式，浏览器无法识别，会把它们当作无效的“开始标签”处理，然后自动补全对应的闭合标签，最终生成空的重复元素（比如额外的<p>）。
2. 多次使用innerHTML +=：每次追加时，浏览器会先把当前DOM序列化为HTML字符串，再和新字符串拼接，然后重新解析整个HTML。这个过程中，原DOM的状态加上新字符串的语法问题，会放大解析错误的影响。

而你提到“仅使用开放标签时元素会自动闭合且无重复”，是因为浏览器能正确识别未闭合的标签（比如<h3> Header 3），会在合适的位置（比如父元素结束时）自动补全闭合标签，不会额外生成元素。

解决办法 #

1. 确保HTML标签语法完全规范 #

所有标签必须使用标准的闭合方式：

• 正确：</p>、</strong>
• 错误：</\p>、</\strong>

2. 避免多次追加innerHTML，改用一次性赋值 #

先把所有需要的HTML内容拼接成完整的正确字符串，再一次性赋值给innerHTML，这样浏览器只需要解析一次，减少错误概率：

let container = document.querySelector(".container");
// 先构建完整的正确HTML字符串
let htmlContent = "<p> Paragraph </p>";
htmlContent += "<h3> Header 3 </h3>"; // 补全h3的闭合标签
htmlContent += "<h2><strong> Strong Header</strong> Not Strong header </h2>";
// 一次性赋值
container.innerHTML = htmlContent;

3. 推荐使用DOM API手动创建元素（更可控） #

如果想要完全避免HTML解析的问题，直接用原生DOM方法创建和添加元素，精准控制每个节点：

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

// 创建段落
const paragraph = document.createElement("p");
paragraph.textContent = " Paragraph ";
container.appendChild(paragraph);

// 创建三级标题
const h3 = document.createElement("h3");
h3.textContent = " Header 3";
container.appendChild(h3);

// 创建带strong的二级标题
const h2 = document.createElement("h2");
const strongText = document.createElement("strong");
strongText.textContent = " Strong Header";
h2.appendChild(strongText);
// 添加非加粗文本
h2.appendChild(document.createTextNode(" Not Strong header "));
container.appendChild(h2);

修复你的strong标签问题 #

只需要把错误的</\strong>改成标准的</strong>，确保标签嵌套正确，就能实现“部分文本加粗”的效果，比如上面两种方法里的写法，都能让Strong Header加粗，后面的文本保持正常样式。

内容的提问来源于stack exchange，提问作者Ben Jost