JS动态生成HTML方法详解

本篇文章向大家介绍《JS动态生成HTML内容方法【教程】》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

可通过innerHTML、createElement+appendChild、insertAdjacentHTML、DocumentFragment及模板字符串五种方法动态插入HTML：innerHTML最直观；createElement更安全；insertAdjacentHTML支持多位置插入；DocumentFragment提升批量插入性能；模板字符串适合列表生成。

如果您希望在网页加载后通过JavaScript向页面中插入HTML内容，则可能是由于需要根据用户交互或数据变化实时更新界面。以下是实现此目标的多种方法：

一、使用innerHTML属性

innerHTML允许直接设置或获取元素内部的HTML字符串，是最常用且直观的动态生成方式。

1、在HTML中定义一个具有唯一id的容器元素，例如

2、在JavaScript中通过document.getElementById获取该元素。

3、将目标HTML字符串赋值给该元素的innerHTML属性，例如element.innerHTML = "

这是动态添加的段落

4、浏览器会自动解析并渲染该HTML字符串中的标签结构。

二、使用createElement和appendChild组合

该方法通过创建真实DOM节点并逐个挂载，避免了HTML字符串解析风险，适合构建复杂、可复用的结构。

1、调用document.createElement("div")创建一个新的div元素节点。

2、使用node.textContent或node.setAttribute设置文本内容或属性。

3、若需嵌套结构，对子元素重复执行createElement和appendChild操作。

4、最后调用父容器的appendChild方法将新节点插入到文档流中。

三、使用insertAdjacentHTML方法

insertAdjacentHTML可在指定位置（如beforebegin、afterbegin、beforeend、afterend）安全地插入HTML字符串，不破坏已有事件监听器。

1、选择目标元素，例如const container = document.querySelector("#container")。

2、调用container.insertAdjacentHTML("beforeend", "新增内容")。

3、"beforeend"表示插入到目标元素内部末尾，等效于appendChild行为。

4、注意：传入的字符串必须是有效的HTML片段，不能包含或等根级标签。

四、使用DocumentFragment优化批量插入

当需要一次性添加多个节点时，DocumentFragment可减少重排重绘次数，提升性能。

1、创建DocumentFragment实例：const fragment = document.createDocumentFragment()。

2、循环创建所需元素，并调用fragment.appendChild(element)逐个添加。

3、所有节点构建完成后，仅执行一次父容器.appendChild(fragment)。

4、DocumentFragment本身不会被插入到DOM中，仅作为临时容器使用。

五、使用模板字符串与for循环生成列表

结合ES6模板字符串可清晰拼接结构化HTML，适用于从数组数据生成列表项。

1、准备一个数据数组，例如const items = ["苹果", "香蕉", "橙子"]。

2、使用items.map(item => `

3、将结果赋值给容器的innerHTML，或配合insertAdjacentHTML使用。

4、模板字符串支持多行书写和变量插值，但需确保变量内容已做转义以防XSS。

以上就是《JS动态生成HTML方法详解》的详细内容，更多关于的资料请关注golang学习网公众号！