尧图网页设计 
文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载导读本篇基于 Modern JavaScript Tutorial现代 JavaScript 教程仓库中 Insert the HTML in the list 练习任务讲解如何在两个既有li之间插入一段 HTML并借此深入掌握 DOM 修改的核心工具之一——insertAdjacentHTML。你将学会四个插入位置参数的区别、它与append/before/after等现代插入方法的取舍以及按 HTML 插入与按文本插入在安全性上的本质差异能够直接应用于动态列表、菜单、消息提示等页面渲染场景。任务还原在列表中间插入 HTML原任务task.md给出的 HTML 结构如下ul idul li idone1/li li idtwo4/li /ul任务要求编写代码把li2/lili3/li插入到两个li之间即最终得到ul idul li idone1/li li idtwo2/li li idthree3/li li idtwo4/li /ul这个任务本身考察的是当需要把一段结构化的 HTML 字符串包含标签插入到文档中某个相对位置时应该选择哪个 DOM 方法。任务的答案与完整讲解位于同目录的 solution.md 与所属章节 article.md。参考答案insertAdjacentHTML(afterend, ...)任务的官方参考解法只有一行one.insertAdjacentHTML(afterend, li2/lili3/li);这行代码的含义是以idone的li元素为基准把 HTML 字符串插入到它之后即li idtwo4/li之前。由于li1/li与li4/li是相邻的兄弟节点插入到第一个元素后面恰好就落在两者之间。为什么任务推荐insertAdjacentHTML而不是innerHTML拼接核心原因是insertAdjacentHTML只影响目标位置附近的节点而innerHTML会整体重写整个父元素的内容。如果对ul.innerHTML做字符串拼接需要先读出原有 HTML、手动拼接、再写回既繁琐又容易破坏原本绑定在节点上的引用与事件。insertAdjacentHTML则把在哪里插入和插入什么两个问题清晰拆开。深入理解四个插入位置参数elem.insertAdjacentHTML(where, html)的第一个参数where必须是四个关键字之一详见 article.md 的 insertAdjacentHTML/Text/Element 一节位置关键字插入效果beforebegin插入到elem之前与elem成为兄弟节点afterbegin插入到elem内部、最前面成为第一个子节点beforeend插入到elem内部、最后面成为最后一个子节点afterend插入到elem之后与elem成为兄弟节点仓库中的 insert-adjacent.svg 用图示直观展示了这四种插入点其中afterbegin/beforeend等价于在目标元素内部的首/尾插入而beforebegin/afterend则是在目标元素外部的前/后插入。回到任务场景one.insertAdjacentHTML(afterend, ...)使用的是兄弟级插入点因此不会触碰ul内部的其他子节点也不会触发任何重新解析整个列表的开销。结合示例理解四个位置的差异示例同样来自 article.mddiv iddiv/div script div.insertAdjacentHTML(beforebegin, pHello/p); div.insertAdjacentHTML(afterend, pBye/p); /script最终 DOM 为pHello/p div iddiv/div pBye/p为什么不用after()直接插入节点也许你会想到更现代的写法one.after(...)。它确实能实现同样的效果但有一个关键区别before/after/append/prepend会把字符串参数按纯文本插入而不是按 HTML 解析。以任务为例如果用one.after(li2/lili3/li)浏览器不会创建两个li元素而是插入一个包含尖括号字面量的文本节点——页面上会直接显示lt;ligt;2lt;/ligt;lt;ligt;3lt;/ligt;这串字符这正是 article.md 强调的strings are inserted in a safe way, likeelem.textContentdoes it。因此要插入DOM 节点或纯文本希望自动转义用append/prepend/before/after要插入一段可解析的 HTML 字符串带标签、样式、结构用insertAdjacentHTML。仓库中的对比图 before-prepend-append-after.svg 展示了现代插入方法的效果另外请注意现代插入方法的参数可以是任意多个节点或字符串的列表且字符串会自动转为文本节点。而insertAdjacentHTML的第二个参数始终是单个 HTML 字符串。文本安全性与textContent的配合insertAdjacentHTML的按 HTML 解析特性既是能力也是风险。当用户输入可能包含b、script等标签时直接插入 HTML 会导致内容被当作标记执行或渲染。仓库中两个相邻任务正好互为印证createTextNode vs innerHTML vs textContent 任务 指出elem.append(document.createTextNode(text))与elem.textContent text效果完全一致都会把字符串作为纯文本放入元素而elem.innerHTML text会作为 HTML解析。二者结果截然不同这正是按文本插入与按 HTML 插入的分水岭。Create a list 任务 要求如果用户输入 HTML 标签应将其按文本对待其 参考实现 正是通过li.textContent data配合ul.append(li)完成动态列表构建——即先创建li元素再用textContent安全赋值。所以正确的选择标准是内容来源可信、可控如模板字符串、服务端渲染好的片段→ 可用insertAdjacentHTML内容来自用户输入或不可信来源→ 使用textContent/createTextNode或用createElement创建元素后逐个属性赋值避免 XSS。两个兄弟方法insertAdjacentText与insertAdjacentElementinsertAdjacentHTML还有两个语法完全一致的兄弟方法见 article.mdelem.insertAdjacentText(where, text)—— 同样的四个位置关键字但第二个参数按纯文本插入elem.insertAdjacentElement(where, elem)—— 同样的四个位置关键字但第二个参数是一个DOM 元素。它们存在的意义主要是让插入 API 的语法保持统一。在实践中大多数情况下只用insertAdjacentHTML因为插入元素和文本时append/prepend/before/after写起来更短、且天然支持多参数批量插入。例如 article.md 中的消息提示示例就用insertAdjacentHTML(afterbegin, ...)把带样式的提示块插到页面顶部。实战扩展同类动态列表场景的三种写法把任务的思想推广到动态生成列表场景仓库给出了多种等价实现路径可根据需求选择写法一insertAdjacentHTML字符串模板适合内容可信时let ul document.getElementById(ul); for (let i 2; i 3; i) { ul.insertAdjacentHTML(beforeend, li${i}/li); }写法二createElement append节点方式适合需要引用或事件绑定let li document.createElement(li); li.textContent i; // 文本安全 ul.append(li); // 追加到列表末尾写法三DocumentFragment 批量插入减少重排适合大批量article.md 的 DocumentFragment 一节演示了把多个li先装进 fragment、再一次插入let fragment new DocumentFragment(); for (let i 1; i 3; i) { let li document.createElement(li); li.append(i); fragment.append(li); } ul.append(fragment); // fragment 会融入其子节点直接成为 ul 的子节点更简化的等价写法是返回节点数组后用展开运算符一次插入ul.append(...getListContent());小结在两个既有兄弟节点之间插入一段 HTML 字符串时one.insertAdjacentHTML(afterend, li2/lili3/li)是官方推荐方案精准、不重写父元素、字符串按 HTML 解析insertAdjacentHTML的四个位置关键字beforebegin/afterbegin/beforeend/afterend覆盖了元素外前后与元素内首尾全部插入点append/prepend/before/after适合插入节点或需要转义的纯文本insertAdjacentHTML适合插入结构化 HTML二者互补而非替代涉及用户输入时优先textContent或createElement构造节点避免直接插入 HTML 带来的 XSS 风险大批量插入节点时可借助DocumentFragment或数组展开一次性完成。如需继续深入可在仓库中对照阅读 章节全文 article.md、任务解答 solution.md以及安全文本处理的 Create a list 任务形成完整的创建 → 插入 → 移除 → 克隆DOM 操作知识链。赞分享文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载相关推荐5分钟构建你的AI浏览器助手让Stagehand解放你的网页自动化工作5分钟构建你的AI浏览器助手让Stagehand解放你的网页自动化工作 你是否曾经花费数小时编写复杂的浏览器自动化脚本只为完成一个简单的网页操作或者面对动文档/教程前端Modern JavaScript Tutorial 闭包章节精讲函数声明在 if 块中的作用域陷阱Function in ifModern JavaScript Tutorial 闭包章节精讲函数声明在 if 块中的作用域陷阱Function in if 本篇技术指南以 Mode文档/教程前端Modern JavaScript Tutorial 数组实战用 sumInput() 实现 prompt 循环输入求和Modern JavaScript Tutorial 数组实战用 sumInput 实现 prompt 循环输入求和 导读 sumInput 是 Modern文档/教程前端上一篇终极阴阳师自动化脚本从零开始解放双手的完整指南下一篇游戏资源逆向工程实战UABEA在Unity资源编辑与模组制作中的专业应用创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Modern JavaScript Tutorial 实战：用 insertAdjacentHTML 在列表中精准插入 HTML 节点
文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载导读本篇基于 Modern JavaScript Tutorial现代 JavaScript 教程仓库中 Insert the HTML in the list 练习任务讲解如何在两个既有li之间插入一段 HTML并借此深入掌握 DOM 修改的核心工具之一——insertAdjacentHTML。你将学会四个插入位置参数的区别、它与append/before/after等现代插入方法的取舍以及按 HTML 插入与按文本插入在安全性上的本质差异能够直接应用于动态列表、菜单、消息提示等页面渲染场景。任务还原在列表中间插入 HTML原任务task.md给出的 HTML 结构如下ul idul li idone1/li li idtwo4/li /ul任务要求编写代码把li2/lili3/li插入到两个li之间即最终得到ul idul li idone1/li li idtwo2/li li idthree3/li li idtwo4/li /ul这个任务本身考察的是当需要把一段结构化的 HTML 字符串包含标签插入到文档中某个相对位置时应该选择哪个 DOM 方法。任务的答案与完整讲解位于同目录的 solution.md 与所属章节 article.md。参考答案insertAdjacentHTML(afterend, ...)任务的官方参考解法只有一行one.insertAdjacentHTML(afterend, li2/lili3/li);这行代码的含义是以idone的li元素为基准把 HTML 字符串插入到它之后即li idtwo4/li之前。由于li1/li与li4/li是相邻的兄弟节点插入到第一个元素后面恰好就落在两者之间。为什么任务推荐insertAdjacentHTML而不是innerHTML拼接核心原因是insertAdjacentHTML只影响目标位置附近的节点而innerHTML会整体重写整个父元素的内容。如果对ul.innerHTML做字符串拼接需要先读出原有 HTML、手动拼接、再写回既繁琐又容易破坏原本绑定在节点上的引用与事件。insertAdjacentHTML则把在哪里插入和插入什么两个问题清晰拆开。深入理解四个插入位置参数elem.insertAdjacentHTML(where, html)的第一个参数where必须是四个关键字之一详见 article.md 的 insertAdjacentHTML/Text/Element 一节位置关键字插入效果beforebegin插入到elem之前与elem成为兄弟节点afterbegin插入到elem内部、最前面成为第一个子节点beforeend插入到elem内部、最后面成为最后一个子节点afterend插入到elem之后与elem成为兄弟节点仓库中的 insert-adjacent.svg 用图示直观展示了这四种插入点其中afterbegin/beforeend等价于在目标元素内部的首/尾插入而beforebegin/afterend则是在目标元素外部的前/后插入。回到任务场景one.insertAdjacentHTML(afterend, ...)使用的是兄弟级插入点因此不会触碰ul内部的其他子节点也不会触发任何重新解析整个列表的开销。结合示例理解四个位置的差异示例同样来自 article.mddiv iddiv/div script div.insertAdjacentHTML(beforebegin, pHello/p); div.insertAdjacentHTML(afterend, pBye/p); /script最终 DOM 为pHello/p div iddiv/div pBye/p为什么不用after()直接插入节点也许你会想到更现代的写法one.after(...)。它确实能实现同样的效果但有一个关键区别before/after/append/prepend会把字符串参数按纯文本插入而不是按 HTML 解析。以任务为例如果用one.after(li2/lili3/li)浏览器不会创建两个li元素而是插入一个包含尖括号字面量的文本节点——页面上会直接显示lt;ligt;2lt;/ligt;lt;ligt;3lt;/ligt;这串字符这正是 article.md 强调的strings are inserted in a safe way, likeelem.textContentdoes it。因此要插入DOM 节点或纯文本希望自动转义用append/prepend/before/after要插入一段可解析的 HTML 字符串带标签、样式、结构用insertAdjacentHTML。仓库中的对比图 before-prepend-append-after.svg 展示了现代插入方法的效果另外请注意现代插入方法的参数可以是任意多个节点或字符串的列表且字符串会自动转为文本节点。而insertAdjacentHTML的第二个参数始终是单个 HTML 字符串。文本安全性与textContent的配合insertAdjacentHTML的按 HTML 解析特性既是能力也是风险。当用户输入可能包含b、script等标签时直接插入 HTML 会导致内容被当作标记执行或渲染。仓库中两个相邻任务正好互为印证createTextNode vs innerHTML vs textContent 任务 指出elem.append(document.createTextNode(text))与elem.textContent text效果完全一致都会把字符串作为纯文本放入元素而elem.innerHTML text会作为 HTML解析。二者结果截然不同这正是按文本插入与按 HTML 插入的分水岭。Create a list 任务 要求如果用户输入 HTML 标签应将其按文本对待其 参考实现 正是通过li.textContent data配合ul.append(li)完成动态列表构建——即先创建li元素再用textContent安全赋值。所以正确的选择标准是内容来源可信、可控如模板字符串、服务端渲染好的片段→ 可用insertAdjacentHTML内容来自用户输入或不可信来源→ 使用textContent/createTextNode或用createElement创建元素后逐个属性赋值避免 XSS。两个兄弟方法insertAdjacentText与insertAdjacentElementinsertAdjacentHTML还有两个语法完全一致的兄弟方法见 article.mdelem.insertAdjacentText(where, text)—— 同样的四个位置关键字但第二个参数按纯文本插入elem.insertAdjacentElement(where, elem)—— 同样的四个位置关键字但第二个参数是一个DOM 元素。它们存在的意义主要是让插入 API 的语法保持统一。在实践中大多数情况下只用insertAdjacentHTML因为插入元素和文本时append/prepend/before/after写起来更短、且天然支持多参数批量插入。例如 article.md 中的消息提示示例就用insertAdjacentHTML(afterbegin, ...)把带样式的提示块插到页面顶部。实战扩展同类动态列表场景的三种写法把任务的思想推广到动态生成列表场景仓库给出了多种等价实现路径可根据需求选择写法一insertAdjacentHTML字符串模板适合内容可信时let ul document.getElementById(ul); for (let i 2; i 3; i) { ul.insertAdjacentHTML(beforeend, li${i}/li); }写法二createElement append节点方式适合需要引用或事件绑定let li document.createElement(li); li.textContent i; // 文本安全 ul.append(li); // 追加到列表末尾写法三DocumentFragment 批量插入减少重排适合大批量article.md 的 DocumentFragment 一节演示了把多个li先装进 fragment、再一次插入let fragment new DocumentFragment(); for (let i 1; i 3; i) { let li document.createElement(li); li.append(i); fragment.append(li); } ul.append(fragment); // fragment 会融入其子节点直接成为 ul 的子节点更简化的等价写法是返回节点数组后用展开运算符一次插入ul.append(...getListContent());小结在两个既有兄弟节点之间插入一段 HTML 字符串时one.insertAdjacentHTML(afterend, li2/lili3/li)是官方推荐方案精准、不重写父元素、字符串按 HTML 解析insertAdjacentHTML的四个位置关键字beforebegin/afterbegin/beforeend/afterend覆盖了元素外前后与元素内首尾全部插入点append/prepend/before/after适合插入节点或需要转义的纯文本insertAdjacentHTML适合插入结构化 HTML二者互补而非替代涉及用户输入时优先textContent或createElement构造节点避免直接插入 HTML 带来的 XSS 风险大批量插入节点时可借助DocumentFragment或数组展开一次性完成。如需继续深入可在仓库中对照阅读 章节全文 article.md、任务解答 solution.md以及安全文本处理的 Create a list 任务形成完整的创建 → 插入 → 移除 → 克隆DOM 操作知识链。赞分享文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载相关推荐5分钟构建你的AI浏览器助手让Stagehand解放你的网页自动化工作5分钟构建你的AI浏览器助手让Stagehand解放你的网页自动化工作 你是否曾经花费数小时编写复杂的浏览器自动化脚本只为完成一个简单的网页操作或者面对动文档/教程前端Modern JavaScript Tutorial 闭包章节精讲函数声明在 if 块中的作用域陷阱Function in ifModern JavaScript Tutorial 闭包章节精讲函数声明在 if 块中的作用域陷阱Function in if 本篇技术指南以 Mode文档/教程前端Modern JavaScript Tutorial 数组实战用 sumInput() 实现 prompt 循环输入求和Modern JavaScript Tutorial 数组实战用 sumInput 实现 prompt 循环输入求和 导读 sumInput 是 Modern文档/教程前端上一篇终极阴阳师自动化脚本从零开始解放双手的完整指南下一篇游戏资源逆向工程实战UABEA在Unity资源编辑与模组制作中的专业应用创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考