如何通过JavaScript将数据库动态HTML包裹在现有HTML结构外层

解决方案 #

浏览器的HTML解析内核存在底层机制：只要收到不完整的未闭合标签，就会自动补全对应的闭合标签，这个逻辑不可自定义修改，所以不推荐拆分两半分别注入的方式，最优方案是先拼接完整HTML再一次性插入，完全避开自动补全问题，操作步骤如下：

1. 从接口获取数据库返回的带占位符的XHTML包装器字符串
2. 读取目标容器内的原有内容
3. 用字符串替换方法把包装器中的{{INNER_CONTENT_PLACEHOLDER}}占位符替换为原有内容
4. 把拼接完成的完整HTML一次性写入目标容器即可

代码示例

// 示例：假设目标容器是body下的第一个div
const targetContainer = document.querySelector('body > div')
// 示例：从接口拿到的数据库返回的包装器字符串
const dbWrapper = `<div class="myCustomBackground">
    <h1 class="myCustomHeader">MyCompany, Inc.</h2>
    <div class="container-padding">
        {{INNER_CONTENT_PLACEHOLDER}}
    </div>
</div>`

// 替换占位符为容器原有内容，得到完整HTML
const completeHtml = dbWrapper.replace('{{INNER_CONTENT_PLACEHOLDER}}', targetContainer.innerHTML)
// 一次性写入，不会触发自动补全逻辑
targetContainer.innerHTML = completeHtml

注意事项 #

• 若原有内容包含绑定的JS事件，替换innerHTML会导致事件丢失，这种情况可以先把原有子节点存到变量中，替换后再重新绑定事件，或者用DOM节点操作的方式把原有子节点移动到新创建的包装器节点对应位置
• 包装器为其他系统提供的用户生成内容，直接注入HTML存在XSS攻击风险，建议先对内容做恶意脚本过滤、非法标签清除处理后再使用

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