什么是嵌套的HTML元素结构
嵌套的HTML元素结构指的是元素之间存在父子层级的包含关系，比如一个<div>容器内部包含<ul>，<ul>内部又包含多个<li>，这种多层级的包含关系就是嵌套结构。在JS中动态创建这类结构，需要按照层级顺序依次创建元素，再将子元素挂载到对应的父元素上。
使用原生DOM方法创建嵌套结构
JS原生提供了createElement和appendChild方法，是最基础的创建嵌套结构的方式，步骤如下：
- 先创建最外层的父元素
- 再依次创建内层子元素
- 通过
appendChild将子元素挂载到对应的父元素上 - 最后将最外层元素挂载到页面的指定容器中
下面是一个创建三层嵌套结构的示例，外层是容器div，中间是列表ul，内层是三个列表项li：
// 获取页面容器
const container = document.getElementById('container');
// 创建最外层div元素
const outerDiv = document.createElement('div');
outerDiv.className = 'outer-wrapper';
// 创建中间层ul元素
const list = document.createElement('ul');
list.className = 'item-list';
// 创建内层三个li元素
for (let i = 1; i <= 3; i++) {
const listItem = document.createElement('li');
listItem.textContent = `列表项${i}`;
// 将li挂载到ul上
list.appendChild(listItem);
}
// 将ul挂载到外层div上
outerDiv.appendChild(list);
// 将外层div挂载到页面容器中
container.appendChild(outerDiv);使用字符串模板结合innerHTML创建
如果嵌套结构比较复杂，逐层创建元素会比较繁琐，也可以使用字符串模板拼接HTML结构，再通过innerHTML一次性插入。这种方式代码更简洁，适合结构固定的场景：
const container = document.getElementById('container');
// 拼接嵌套的HTML字符串
const htmlStr = `
<div class="outer-wrapper">
<ul class="item-list">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
</div>
`;
// 将字符串插入到容器中
container.innerHTML = htmlStr;两种方式的对比
为了帮助开发者选择合适的创建方式，下面从几个维度对比两种方法的差异：
| 对比维度 | 原生DOM方法 | innerHTML字符串方式 |
|---|---|---|
| 适用场景 | 结构动态变化、需要单独操作子元素 | 结构固定、快速生成复杂结构 |
| 性能 | 多次操作DOM时性能较好 | 一次性插入时性能较好，频繁修改会重绘 |
| 可维护性 | 层级多时代码冗长 | 字符串拼接过长时可读性下降 |
注意事项
在使用这两种方式创建嵌套结构时，需要注意几个问题：
- 使用原生DOM方法时，要确保子元素创建完成后再挂载到父元素，避免出现空引用
- 使用
innerHTML时，要注意避免XSS风险，不要直接插入用户输入的未转义内容 - 如果需要在创建后操作子元素，原生DOM方法创建的元素可以直接引用，而
innerHTML插入的元素需要重新查询获取
实际开发中可以根据具体需求选择对应的方式，结构复杂且需要动态调整的场景优先使用原生DOM方法，固定结构快速生成的场景可以使用innerHTML方式。
JSHTML元素嵌套结构createElementappendChild修改时间：2026-05-29 22:25:51