可通过innerHTML、createElement+appendChild、insertAdjacentHTML、DocumentFragment及模板字符串五种方法动态插入HTML：innerHTML最直观；createElement更安全；insertAdjacentHTML支持多位置插入；DocumentFragment提升批量插入性能；模板字符串适合列表生成。
如果您希望在网页加载后通过JavaScript向页面中插入HTML内容，则可能是由于需要根据用户交互或数据变化实时更新界面。以下是实现此目标的多种方法：
一、使用innerHTML属性
innerHTML允许直接设置或获取元素内部的HTML字符串，是最常用且直观的动态生成方式。
1、在HTML中定义一个具有唯一id的容器元素，例如
。
2、在JavaScript中通过document.getElementById获取该元素。
立即学习“Java免费学习笔记（深入）”；
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片段，不能包含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 => `
${item}`).join(“”)生成HTML字符串。
3、将结果赋值给容器的innerHTML，或配合insertAdjacentHTML使用。
4、模板字符串支持多行书写和变量插值，但需确保变量内容已做转义以防XSS。
以上就是如何用js写html_使用JavaScript动态生成HTML内容【生成】的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1606803.html
微信扫一扫 
支付宝扫一扫 
