尧图网页设计 
文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载本文围绕 Modern JavaScript Tutorialen.javascript.info的「Modifying the document」章节练习Create a list展开讲解如何用prompt循环收集用户输入、用document.createElement动态生成li并追加到ul以及为什么必须用textContent而非innerHTML来安全地处理用户输入的 HTML 标签。读完本文你将掌握动态 DOM 构建 循环输入收集 文本安全插入这一完整实战套路。任务原文与要求拆解任务位于仓库 2-ui/1-document/07-modifying-document/6-create-list/task.md核心要求是Write an interface to create a list from user input.对每一个列表项需要依次完成三步用prompt向用户询问该条目的内容用该内容创建li并把它添加进ul持续循环直到用户取消输入——即按下key:Esc或提交空字符串。此外还有两条容易被忽略的硬性约束All elements should be created dynamically——ul、li都必须由 JavaScript 动态创建页面上不能预写任何列表结构If a user types HTML-tags, they should be treated like a text——用户输入的btext/b这类内容必须原样作为纯文本显示绝不能解析成真实标签被执行。这直接决定了最终实现里textContent与innerHTML的选择。核心知识点回顾动态创建与插入节点本任务属于「Modifying the document」章节的实践环节其理论基础全部来自父章节文档 2-ui/1-document/07-modifying-document/article.md。创建节点document.createElement(tag)——按标签名创建新的元素节点如document.createElement(li)document.createTextNode(text)——创建文本节点本任务中不需要显式调用它因为textContent会隐式完成同样的事。插入节点node.append(...nodes or strings)——把节点或字符串追加到node末尾本任务的核心插入手段同类方法还有prepend开头、before前、after后、replaceWith替换等它们都支持一次传入多个节点或字符串且字符串会被「按文本」安全插入。一个关键机制插入方法会自动把节点从原来位置移走因此动态创建的节点可以直接append到目标容器无需手动remove。这也意味着在本任务中每个新li只需ul.append(li)一次即可落到列表末尾天然满足追加到列表的语义。官方参考实现solution.view 完整代码仓库在 2-ui/1-document/07-modifying-document/6-create-list/solution.view/index.html 中给出了可直接运行的完整实现逻辑非常精炼!DOCTYPE HTML html body h1Create a list/h1 script let ul document.createElement(ul); document.body.append(ul); while (true) { let data prompt(Enter the text for the list item, ); if (!data) { break; } let li document.createElement(li); li.textContent data; ul.append(li); } /script /body /html对照任务要求逐条验证任务要求实现位置说明所有元素动态创建document.createElement(ul)document.createElement(li)ul与li均由 JS 生成HTML 中没有任何预置列表标签用prompt询问内容let data prompt(Enter the text for the list item, );每次循环都弹出一个输入框默认值为空字符串创建li并加入ulli.textContent data;ul.append(li);先赋值内容再追加到列表末尾直到取消或空输入才停止if (!data) { break; }prompt在点取消 / 按Esc时返回null空输入时返回两者都触发break退出死循环HTML 标签按文本处理li.textContent data;textContent把内容当作纯文本写入b等标签原样显示为字符为什么用while (true)breakprompt本身无法直接作为继续输入则继续、取消则停止的循环条件因为用户点「确定」并输入内容时返回的是字符串包括0、 等看似为空实则有效的值用户点「取消」或按Esc时返回null用户不输入任何字符直接点「确定」时返回空字符串。由于null与在布尔上下文中都是 falsyif (!data)能一次性覆盖取消与空输入两种终止情形因此采用while (true)配合提前break是最简洁可靠的写法。这也呼应了任务描述中「continue until the user cancels the input (by pressingkey:Escor via an empty entry)」的精确语义。关键考点textContent 与 innerHTML 的安全差异任务的官方解答 2-ui/1-document/07-modifying-document/6-create-list/solution.md 只有一句话却点明了本任务最重要的考点Please note the usage oftextContentto assign thelicontent.如果改成下面这种写法表面上也能运行但行为完全不同li.innerHTML data; // 危险会把用户输入解析成 HTML当用户输入bhello/b时li.textContent data→ 页面显示字面字符bhello/b标签不生效li.innerHTML data→ 页面显示加粗的hello标签被浏览器解析执行。后者意味着用户可以向你的页面注入任意 HTML 甚至script构成 XSS 风险。凡是把用户输入写入 DOM都应优先使用textContent或createTextNode只有在确信内容来源可信时才使用innerHTML。这一结论在同章节的姊妹练习 1-createtextnode-vs-innerhtml/task.md 中有直接印证题目给出elem.append(document.createTextNode(text))、elem.innerHTML text、elem.textContent text三个命令正确答案是第 1 和第 3 个完全等价——两者都把text「按文本」加入元素而innerHTML会解析标签。可见textContent的本质就是创建一个文本节点再插入这正是本任务安全性的根基。进阶思考容器预写与清空、批量插入的取舍若容器预写在 HTML 中会怎样任务要求所有元素动态创建但现实中常见的另一种做法是在 HTML 里预写ul idlist/ul脚本只负责创建li。此时只需把第一行改成document.getElementById(list)或直接用id引用其余逻辑不变。两种方式都可行动态创建容器的好处是页面结构完全由 JS 掌控便于后续把整个列表生成逻辑封装成可复用的函数。循环追加与清空列表的坑在循环中逐个append是最直观的写法。如果想每次重跑时清空旧列表可参考同章节练习 4-clear-elem/solution.md 中的两种清空方式// 方式一逐个移除首个子节点注意不能正序 for 循环因为 remove() 会使 childNodes 集合实时变化而跳项 function clear(elem) { while (elem.firstChild) { elem.firstChild.remove(); } } // 方式二一行搞定 elem.innerHTML ;方式一中的不能正序循环遍历childNodes再逐个remove()是本章节的经典陷阱原因在于childNodes是动态集合live collection每次remove()后索引都会前移导致跳项。这与本任务while (true)循环的终止条件设计一样都体现了对循环过程中 DOM 状态实时变化的深刻理解。一次插入多个元素DocumentFragment 与展开运算符如果输入收集阶段需要先暂存多个li再一次性插入父章节 article.md 还介绍了两种方案DocumentFragment把li全部append进一个DocumentFragment再把整个 fragment 追加到ul插入时 fragment 会融化为自身内容即ul中直接出现各li数组 展开运算符把li收集进数组后用ul.append(...array)一次追加是更常用也更简单的等价写法。对于本任务边输入边追加的交互模型逐项append已经足够无需引入 fragment但理解这两条路径有助于在批量生成列表类需求如后续章节的日历表格、排序表格任务中写出更高效的代码。同章节练习 11-append-to-list/task.md 则演示了向列表中间插入一段 HTML的场景其解法one.insertAdjacentHTML(afterend, li2/lili3/li)恰好与仅插入 DOM 节点的append形成对照——insertAdjacentHTML专门用于按 HTML 解析插入字符串使用前必须确认字符串来源可信。运行与验证直接打开 solution.view/index.html或把文中完整代码另存为 HTML 后在浏览器中打开即可体验页面加载后自动弹出输入框输入苹果并确定页面上出现列表项「苹果」再次输入b加粗尝试/b并确定列表项应原样显示b加粗尝试/b这段字符而不是加粗文字——验证textContent的纯文本语义最后一次直接点「取消」或按Esc列表输入结束后续不再弹出输入框。可用以下边界输入验证循环终止逻辑的正确性0数字 0 的字符串应作为有效内容加入列表、空格字符串同样加入列表、空字符串终止循环、取消终止循环。总结「Create a list」虽是一个小练习却浓缩了 DOM 编程的三组核心能力动态创建与插入document.createElementappend是构建活页面的基本组合配套prepend / before / after / replaceWith与remove可覆盖全部插入/移除场景安全的文本写入用户输入一律用textContent等价于createTextNode后插入杜绝innerHTML带来的标签注入风险——这是本任务的唯一官方提示点也是实践中必须固化的安全习惯输入循环的终止控制利用null与同为 falsy 的特性用while (true)if (!data) break同时覆盖取消与空输入两种退出路径。若想继续深入可依次阅读父章节 Modifying the document 全文并完成同目录下的 clear the element、createTextNode vs innerHTML vs textContent、insert the HTML in the list 等姊妹练习即可系统掌握 DOM 动态构建的完整知识面。赞分享文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载相关推荐terraform-provider-aws 实战aws_globalaccelerator_accelerator 数据源完整指南terraform provider aws 实战 aws_globalaccelerator_accelerator 数据源完整指南 aws_globala文档/教程前端freeCodeCamp 挑战精讲用 ol 与 li 创建 HTML 有序列表Create an Ordered ListfreeCodeCamp 挑战精讲用 ol 与 li 创建 HTML 有序列表Create an Ordered List 本文以 freeCodeC前端后端教育gogcli gog tasks lists create 命令详解在终端中创建 Google Tasks 任务列表gogcli gog tasks lists create 命令详解在终端中创建 Google Tasks 任务列表 gog tasks lists crea创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 en.javascript.info 实战：用 prompt 循环与 textContent 动态创建列表（Create a list 任务详解）
文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载本文围绕 Modern JavaScript Tutorialen.javascript.info的「Modifying the document」章节练习Create a list展开讲解如何用prompt循环收集用户输入、用document.createElement动态生成li并追加到ul以及为什么必须用textContent而非innerHTML来安全地处理用户输入的 HTML 标签。读完本文你将掌握动态 DOM 构建 循环输入收集 文本安全插入这一完整实战套路。任务原文与要求拆解任务位于仓库 2-ui/1-document/07-modifying-document/6-create-list/task.md核心要求是Write an interface to create a list from user input.对每一个列表项需要依次完成三步用prompt向用户询问该条目的内容用该内容创建li并把它添加进ul持续循环直到用户取消输入——即按下key:Esc或提交空字符串。此外还有两条容易被忽略的硬性约束All elements should be created dynamically——ul、li都必须由 JavaScript 动态创建页面上不能预写任何列表结构If a user types HTML-tags, they should be treated like a text——用户输入的btext/b这类内容必须原样作为纯文本显示绝不能解析成真实标签被执行。这直接决定了最终实现里textContent与innerHTML的选择。核心知识点回顾动态创建与插入节点本任务属于「Modifying the document」章节的实践环节其理论基础全部来自父章节文档 2-ui/1-document/07-modifying-document/article.md。创建节点document.createElement(tag)——按标签名创建新的元素节点如document.createElement(li)document.createTextNode(text)——创建文本节点本任务中不需要显式调用它因为textContent会隐式完成同样的事。插入节点node.append(...nodes or strings)——把节点或字符串追加到node末尾本任务的核心插入手段同类方法还有prepend开头、before前、after后、replaceWith替换等它们都支持一次传入多个节点或字符串且字符串会被「按文本」安全插入。一个关键机制插入方法会自动把节点从原来位置移走因此动态创建的节点可以直接append到目标容器无需手动remove。这也意味着在本任务中每个新li只需ul.append(li)一次即可落到列表末尾天然满足追加到列表的语义。官方参考实现solution.view 完整代码仓库在 2-ui/1-document/07-modifying-document/6-create-list/solution.view/index.html 中给出了可直接运行的完整实现逻辑非常精炼!DOCTYPE HTML html body h1Create a list/h1 script let ul document.createElement(ul); document.body.append(ul); while (true) { let data prompt(Enter the text for the list item, ); if (!data) { break; } let li document.createElement(li); li.textContent data; ul.append(li); } /script /body /html对照任务要求逐条验证任务要求实现位置说明所有元素动态创建document.createElement(ul)document.createElement(li)ul与li均由 JS 生成HTML 中没有任何预置列表标签用prompt询问内容let data prompt(Enter the text for the list item, );每次循环都弹出一个输入框默认值为空字符串创建li并加入ulli.textContent data;ul.append(li);先赋值内容再追加到列表末尾直到取消或空输入才停止if (!data) { break; }prompt在点取消 / 按Esc时返回null空输入时返回两者都触发break退出死循环HTML 标签按文本处理li.textContent data;textContent把内容当作纯文本写入b等标签原样显示为字符为什么用while (true)breakprompt本身无法直接作为继续输入则继续、取消则停止的循环条件因为用户点「确定」并输入内容时返回的是字符串包括0、 等看似为空实则有效的值用户点「取消」或按Esc时返回null用户不输入任何字符直接点「确定」时返回空字符串。由于null与在布尔上下文中都是 falsyif (!data)能一次性覆盖取消与空输入两种终止情形因此采用while (true)配合提前break是最简洁可靠的写法。这也呼应了任务描述中「continue until the user cancels the input (by pressingkey:Escor via an empty entry)」的精确语义。关键考点textContent 与 innerHTML 的安全差异任务的官方解答 2-ui/1-document/07-modifying-document/6-create-list/solution.md 只有一句话却点明了本任务最重要的考点Please note the usage oftextContentto assign thelicontent.如果改成下面这种写法表面上也能运行但行为完全不同li.innerHTML data; // 危险会把用户输入解析成 HTML当用户输入bhello/b时li.textContent data→ 页面显示字面字符bhello/b标签不生效li.innerHTML data→ 页面显示加粗的hello标签被浏览器解析执行。后者意味着用户可以向你的页面注入任意 HTML 甚至script构成 XSS 风险。凡是把用户输入写入 DOM都应优先使用textContent或createTextNode只有在确信内容来源可信时才使用innerHTML。这一结论在同章节的姊妹练习 1-createtextnode-vs-innerhtml/task.md 中有直接印证题目给出elem.append(document.createTextNode(text))、elem.innerHTML text、elem.textContent text三个命令正确答案是第 1 和第 3 个完全等价——两者都把text「按文本」加入元素而innerHTML会解析标签。可见textContent的本质就是创建一个文本节点再插入这正是本任务安全性的根基。进阶思考容器预写与清空、批量插入的取舍若容器预写在 HTML 中会怎样任务要求所有元素动态创建但现实中常见的另一种做法是在 HTML 里预写ul idlist/ul脚本只负责创建li。此时只需把第一行改成document.getElementById(list)或直接用id引用其余逻辑不变。两种方式都可行动态创建容器的好处是页面结构完全由 JS 掌控便于后续把整个列表生成逻辑封装成可复用的函数。循环追加与清空列表的坑在循环中逐个append是最直观的写法。如果想每次重跑时清空旧列表可参考同章节练习 4-clear-elem/solution.md 中的两种清空方式// 方式一逐个移除首个子节点注意不能正序 for 循环因为 remove() 会使 childNodes 集合实时变化而跳项 function clear(elem) { while (elem.firstChild) { elem.firstChild.remove(); } } // 方式二一行搞定 elem.innerHTML ;方式一中的不能正序循环遍历childNodes再逐个remove()是本章节的经典陷阱原因在于childNodes是动态集合live collection每次remove()后索引都会前移导致跳项。这与本任务while (true)循环的终止条件设计一样都体现了对循环过程中 DOM 状态实时变化的深刻理解。一次插入多个元素DocumentFragment 与展开运算符如果输入收集阶段需要先暂存多个li再一次性插入父章节 article.md 还介绍了两种方案DocumentFragment把li全部append进一个DocumentFragment再把整个 fragment 追加到ul插入时 fragment 会融化为自身内容即ul中直接出现各li数组 展开运算符把li收集进数组后用ul.append(...array)一次追加是更常用也更简单的等价写法。对于本任务边输入边追加的交互模型逐项append已经足够无需引入 fragment但理解这两条路径有助于在批量生成列表类需求如后续章节的日历表格、排序表格任务中写出更高效的代码。同章节练习 11-append-to-list/task.md 则演示了向列表中间插入一段 HTML的场景其解法one.insertAdjacentHTML(afterend, li2/lili3/li)恰好与仅插入 DOM 节点的append形成对照——insertAdjacentHTML专门用于按 HTML 解析插入字符串使用前必须确认字符串来源可信。运行与验证直接打开 solution.view/index.html或把文中完整代码另存为 HTML 后在浏览器中打开即可体验页面加载后自动弹出输入框输入苹果并确定页面上出现列表项「苹果」再次输入b加粗尝试/b并确定列表项应原样显示b加粗尝试/b这段字符而不是加粗文字——验证textContent的纯文本语义最后一次直接点「取消」或按Esc列表输入结束后续不再弹出输入框。可用以下边界输入验证循环终止逻辑的正确性0数字 0 的字符串应作为有效内容加入列表、空格字符串同样加入列表、空字符串终止循环、取消终止循环。总结「Create a list」虽是一个小练习却浓缩了 DOM 编程的三组核心能力动态创建与插入document.createElementappend是构建活页面的基本组合配套prepend / before / after / replaceWith与remove可覆盖全部插入/移除场景安全的文本写入用户输入一律用textContent等价于createTextNode后插入杜绝innerHTML带来的标签注入风险——这是本任务的唯一官方提示点也是实践中必须固化的安全习惯输入循环的终止控制利用null与同为 falsy 的特性用while (true)if (!data) break同时覆盖取消与空输入两种退出路径。若想继续深入可依次阅读父章节 Modifying the document 全文并完成同目录下的 clear the element、createTextNode vs innerHTML vs textContent、insert the HTML in the list 等姊妹练习即可系统掌握 DOM 动态构建的完整知识面。赞分享文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载相关推荐terraform-provider-aws 实战aws_globalaccelerator_accelerator 数据源完整指南terraform provider aws 实战 aws_globalaccelerator_accelerator 数据源完整指南 aws_globala文档/教程前端freeCodeCamp 挑战精讲用 ol 与 li 创建 HTML 有序列表Create an Ordered ListfreeCodeCamp 挑战精讲用 ol 与 li 创建 HTML 有序列表Create an Ordered List 本文以 freeCodeC前端后端教育gogcli gog tasks lists create 命令详解在终端中创建 Google Tasks 任务列表gogcli gog tasks lists create 命令详解在终端中创建 Google Tasks 任务列表 gog tasks lists crea创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考