Javascript 单击按钮时将'li'更改为输入

我想在按下编辑按钮时，将

更改为具有

值的文本输入

我的解决办法是

let taskList=document.querySelector（“任务列表”）；
const addTaskInput=document.querySelector（“#addTaskInput”）；
const addTaskButton=document.querySelector（“addTaskButton”）；
const addTask=（）=>{
如果（addTaskInput.value！=“”）{
让taskItem=document.createElement（“li”）；
taskItem.textContent=addTaskInput.value；
让复选框=document.createElement（“输入”）；
setAttribute（“类型”、“复选框”）；
让removietem=document.createElement（“按钮”）；
setAttribute（“类”、“移除”）；
removietem.textContent=“删除”；
让editItem=document.createElement（“按钮”）；
editItem.textContent=“编辑”
setAttribute（“类”、“编辑”）；
taskList.appendChild（任务项）；
taskItem.appendChild（复选框）；
taskItem.appendChild（removeItem）；
taskItem.appendChild（editItem）；
addTaskInput.value=“”；
};
}
addTaskButton.addEventListener（“单击”，addTask）；
//const checkbox=document.querySelector（“输入”）.addEventListener（'change'，（）=>{
//如果（checkbox.checked==true）{
//控制台日志（“检查测试”）；
//}其他{
//控制台日志（“不工作”）；
// }
// });
addTaskInput.addEventListener（“向下键”，“事件）=>{
如果（event.keyCode==13）{
addTask（）；
}
});    
taskList.addEventListener（“单击”，（事件）=>{
如果（event.target.tagName==“按钮”）{
if（event.target.className==“删除”）{
让taskItem=event.target.parentNode；
taskList=taskItem.parentNode；
taskList.removeChild（任务项）；
}else if（event.target.className==“编辑”）{
event.target.setAttribute（“类”、“完成”）；
让taskItem=event.target.parentNode；
taskList=taskItem.parentNode；
让editMode=document.createElement（“输入”）；
setAttribute（“类型”、“文本”）；
setAttribute（“值”，taskItem.textContent）；
taskList.replaceChild（任务项，编辑模式）；
}
}
});
html{
框大小：边框框；
}
*，*：：之后，*：：之前{
框大小：继承；
}
* {
框大小：边框框；
字体系列：无衬线；
}
.包装纸{
宽度：300px；
最小高度：300px；
边框：2倍实心#000；
保证金：1rem自动；
填充：1rem；
单词包装：打断单词；
位置：相对位置；
}
保险商实验室{
左侧填充：0；
左边距：0；
}
ulli{
宽度：100%；
填充：1rem.25rem；
列表样式：无；
边框底部：1px纯黑；
}
ul li按钮{
宽度：30%；
浮动：对；
边界：无；
保证金权利：.5rem；
背景：无；
字体大小：.75rem；
过渡：背景色0.5s；
-webkit过渡：颜色0.5s轻松；
颜色：#000；
}
ul li按钮：悬停{
颜色：#777；
}
ulli输入{
浮动：对；
}
#添加任务按钮{
背景：#fff；
边框：.5px纯黑色；
保证金：1rem；
最大宽度：100%；
高度：2em；
边界半径：无；
过渡：背景色0.5s；
-webkit过渡：背景色0.5s轻松；
背景色：#fff；
}
#addTaskButton:悬停{
背景色：#e7e7e7；
}



添加任务
反转replaceChild的参数。第一个参数是新节点，第二个参数是需要替换的旧节点

taskList.replaceChild(editMode,taskItem)

请创建一个完整的工作示例-snippet/jsfiddle/codepen。@Dekel请不要要求人们在第三方网站上发布他们的代码。随着时间的推移，这些链接可能会消失，然后这里的问题就没有意义了。Stack Overflow有一个“Code Snippet”选项，您可以将它直接插入问题中，就在这里创建代码的工作版本。@ScottMarcus由于CORS的原因，一些外部库无法在SO代码段中工作，因此有时您必须使用JSFIDLE/codepen:）@Dekel，但是，这些场景并不常见，因为大多数图书馆都有公共CDN，这些CDN没有被CORS阻止。因此，SO总是首选。我同意SO是首选