使用appendchild在JavaScript中将字符串转换为DOM节点（ul/li）

我试图利用

createElement

、

createTextNode

和

appendChild

重写一个过时的简单待办事项列表代码示例

代码示例需要使用

array

join（）

方法，因此很遗憾，无法删除该方法。旧版本只是在代码片段中为

ul

列表编写HTML

我不确定如何继续我在js第30行输入的注释：“需要将任务（从stringToInsert）作为列表呈现到

div id=“output”

此处”

我参考了以下stackoverflow文章来帮助我重写代码： -此示例使用join（）和appendChild，但不使用列表项

- 从中，我复制了a中的代码，并将其放入我的

一旦我有了函数

addTask（）

working

createul（）

，它的相关HTML元素（如“渲染列表”按钮）将被删除

//tasks.js#2
//此脚本管理待办事项列表。
//需要一个全局变量：
var任务=[]；
函数addTask（）{
"严格使用",；
log（“addTask已启动”）；
//获取任务：
var task=document.getElementById（'task'）；
//对输出位置的引用：
var output=document.getElementById（'output'）；
if（task.value）{
tasks.push（task.value）；
//更新页面：
//var消息='待办事项'；
var stringToInsert=tasks.join（“：”）；
控制台日志（stringToInsert）；
var taskUl=document.createElement（'ul'）；
taskUl.setAttribute（'id'，'autoTask'）；
document.getElementById（'output'）.appendChild（taskUl）；
/*需要将任务（从stringToInsert）作为列表呈现到此处的div id=“output”*/
document.getElementById（“任务”）。值=“”；
}
//返回false以防止提交：
返回false；
}//addTask（）函数的结尾。
函数createul（）{
var ul=document.createElement（'ul'）；
ul.setAttribute（'id'，'proList'）；
变量t，tt；
productList=[“电子手表”、“家居用品”、“童装”、“女性时尚”]；
document.getElementById（'renderList'）.appendChild（ul）；
forEach（renderProductList）；
函数renderProductList（元素、索引、arr）{
var li=document.createElement（'li'）；
li.setAttribute（'class'，'item'）；
ul.儿童（li）；
t=document.createTextNode（元素）；
li.innerHTML=li.innerHTML+元素；
}
}
函数init（）{
document.getElementById（'renderbtn'）。addEventListener（“单击”，createul）；
document.getElementById（'theForm'）。onsubmit=addTask；
}
addEventListener（'load'，init）
/*css（对于这个例子，我已经简化了一点，很抱歉我没有进一步简化）*/
形式{
保证金：0自动；
宽度：400px；
填充：14px；
背景色：#ffffff；
边框：实心2px#425955；
}
/*------风格化------------*/
h1{
字体大小：14px；
字体大小：粗体；
边缘底部：8px；
}
p{
字体大小：11px；
颜色：#666666；
边缘底部：20px；
边框底部：实心1px#BFBD9F；
垫底：10px；
}
标签{
显示：块；
字体大小：粗体；
文本对齐：右对齐；
宽度：140px；
浮动：左；
}
挑选{
浮动：左；
字体大小：12px；
填充物：4px2px；
边框：实心1px#BFBD9F；
宽度：200px；
利润率：2px20px10px；
}
输入{
浮动：左；
字体大小：12px；
填充物：4px2px；
边框：实心1px#BFBD9F；
宽度：200px；
利润率：2px20px10px；
}
#提交{
明确：两者皆有；
左边距：150像素；
宽度：125px；
高度：31px；
背景#F1F2D8；
文本对齐：居中；
线高：20px；
颜色：#000000；
字体大小：12px；
字体大小：粗体；
}
#输出{
明确：两者皆有；
边缘底部：10px；
颜色：蓝色；
}

任务


渲染列表
我将向您展示一种可能有助于解决问题的不同方法-


功能ul（节点）
{const e=document.createElement（“ul”）
for（节点的常数n）
e、 儿童（n）
返回e
}
函数li（文本）
{const e=document.createElement（“li”）
e、 text内容=文本
返回e
}
提交函数（事件）
{event.preventDefault（）
tasks.push（f.taskInput.value）
f、 taskInput.value=“”
render（）
}
函数渲染（）
{const newList=ul（tasks.map（li））
f、 firstChild.replaceWith（新列表）
}
const tasks=[“洗碗”、“扫地”]//从处理函数返回
false
不会阻止表单的提交。这只适用于内联侦听器代码。我遇到了一个巨大的问题，在我开始使用它之前，页面会刷新为空白，但你是对的，现在当我注释它时，它不会发生。我将进一步研究它。原始代码示例（不包括）将其放在同一个位置。修复方法很简单，如果您不想提交表单，那么就不要提交表单。使用按钮类型的按钮，并侦听单击该按钮，而不是侦听表单的提交事件。然后只需在处理程序函数的参数列表中包含事件对象参数，并调用其
preventDefault
方法。另外请注意，您也可以在JS中更改按钮的类型……这非常令人印象深刻。非常干净整洁的代码，我可以从中学到很多东西。谢谢。我注意到渲染函数第22行的tasks.map。如果我不能使用forEach，我会考虑使用map数组函数，你给出了一个比我想象的更好的例子。我很乐意提供帮助。祝你旅途好运！我注意到你没有使用“；”。例如：
const tasks=[]//目光锐利，捕捉得好！JavaScript有，而且在大多数情况下，您完全不需要它们。作为一个功能风格倡导者，当我需要