仅使用insertAdjacentHTML构建页面存在哪些弊端？

问题背景 #

假设系统的index.html和module.js代码如下：

index.html #

...
<head>
   <script src="./module.js"></script>
</head>
<body>
    <div id="background">
    </div>
</body>

<script>
    builder("background", "title" , "Hello");
    builder("title", "text", "World");
</script>

module.js #

function builder(ItemID, ChildID, Content) {
    var Object = document.getElementById(ItemID);
    Object.insertAdjacentHTML("beforeend", `
        <div id="` + ChildID + `">
            ` + Content + `
        </div>
    `);
}

运行后生成的DOM结构：

<div id="background">
   <div id="title">
      Hello
      <div id="text">
         World
      </div>
   </div>
</div>

已知insertAdjacentHTML性能优于innerHTML或innerText，但仅使用该API构建页面是否存在弊端？

核心弊端 #

• XSS攻击风险极高：如果Content参数包含用户输入的恶意代码（比如<script>窃取用户数据的代码</script>），insertAdjacentHTML会直接解析并执行这段代码，完全没有过滤机制，很容易导致跨站脚本攻击，泄露用户敏感信息。
• 元素操作效率低：每次插入新元素后，若要对其进行后续操作（比如修改样式、绑定事件），必须再次调用getElementById或其他DOM查询方法获取元素引用，频繁的DOM查询会抵消掉它的性能优势，尤其在批量创建元素时更明显。
• 代码可维护性差：复杂页面结构靠字符串拼接HTML，很容易出现引号冲突、标签未闭合等语法错误，嵌套层级越深，代码越混乱，后期修改和调试成本极高，远不如使用createElement等原生DOM API直观。
• 事件绑定繁琐且不安全：要给插入的元素绑定事件，要么在HTML字符串里写内联onclick（进一步增加XSS风险），要么插入后再查询元素调用addEventListener，步骤冗余，无法像直接创建元素那样即时绑定事件。
• 语义化与可访问性易遗漏：纯字符串拼接容易忽略语义化标签的正确使用，也容易忘记添加ARIA属性等可访问性相关配置，一旦出现标签嵌套错误，还会导致DOM结构错乱，影响屏幕阅读器等辅助工具的正常使用。

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