如何避免jQuery append自动闭合标签导致HTML结构错误

问题核心 #

使用$(".item:last").append(data.html)时，若data.html包含单独的闭合标签（如先</div>再开启新容器），jQuery会自动修正不合法的HTML结构，导致插入后的DOM不符合预期；用额外div包裹又会破坏Bootstrap布局。

有效解决方案 #

1. 用原生JS的innerHTML直接拼接（推荐）

原生JavaScript的innerHTML不会对传入的HTML字符串做自动修正，能完整保留原始标签结构，完美适配这种需要先闭合上层容器再开启新容器的场景，同时不会引入额外元素破坏布局：

document.querySelector(".item:last").innerHTML += data.html;

如果需要兼容旧浏览器或操作多个元素，也可以结合jQuery获取DOM元素后使用原生属性：

$(".item:last")[0].innerHTML += data.html;

2. 拆分特殊区块针对性处理（适合后端返回有固定标记的情况）

观察你的data.html包含// START SPECIAL和//END SPECIAL标记，可以拆分字符串后分别操作DOM：

// 拆分HTML内容
const [beforeSpecial, specialAndRest] = data.html.split('// START SPECIAL');
const [specialHtml, afterSpecial] = specialAndRest.split('//END SPECIAL');

// 追加正常内容到最后一个.item
$(".item:last").append(beforeSpecial.trim());

// 处理特殊区块：找到需要闭合的上层容器，插入新结构
const targetContainer = $(".row.border").parent();
targetContainer.append(specialHtml.trim());

// 追加后续内容到新容器中
$(".next-part .row.row-cols-1").append(afterSpecial.trim());

这种方法依赖固定标记，但能更精准地控制DOM结构的修改。

原理说明 #

jQuery的append()方法会将传入的HTML解析为合法DOM节点，单独的闭合标签不属于合法节点，因此会被自动忽略；原生innerHTML则直接将字符串作为HTML解析后追加到元素内部，不会做额外结构修正，因此能满足这种特殊场景需求。

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