在javascript和html购物列表中从使用表更改为li

我目前有一个程序，允许我制作一个购物清单，在那里我可以添加名称和价格。我以前使用表，但现在我被告知需要更改列表中的所有内容，以便使用

appendChild（）

和

createElement（）

，如何更改JavaScript中的所有内容

let addItem=document.querySelector（“#addButton”）；
设newTab=document.querySelector（“.adding”）；
let table=document.querySelector（“表”）；
让priceInput=document.querySelector（“价格”）；
让productInput=document.querySelector（#product）
let total=document.querySelector（#total）
addItem.addEventListener（“单击”，添加产品）；
函数addProduct（）{
if（priceInput.value==“”| | isNaN（priceInput.value））{
返回；
}
让removeBtn=document.createElement（“按钮”）；
removeBtn.innerHTML=“删除项目”；
let row=table.insertRow（1）；
设cell1=row.insertCell（0）；
设cell2=row.insertCell（1）；
设cell3=row.insertCell（2）；
设cell4=row.insertCell（3）；
单元格4.类列表。添加（“总计”）；
单元格1.追加子项（删除BTN）；
cell2.innerHTML=productInput.value
cell3.innerHTML=parseFloat（priceInput.value）；
cell4.innerHTML=parseFloat（price.value）；
removeBtn.addEventListener（“单击”），函数（事件）{
this.parentElement.parentElement.classList.toggle（“完成”）；
displayTotal（）；
});
displayTotal（）；
}
函数displayTotal（）{
var toPay=document.getElementsByClassName（“总计”）；
var-suma=0；
对于（var n=0；n

添加项
产品
价格
全部的
全部的
0

正如我所说，您拥有构建列表所需的一切

您可能需要的唯一额外的东西是CSS来对齐所有内容。与表格不同的是，表格有单元格来对齐所有内容，列表有任何内容，因此您需要创建自己的“单元格”——您可以使用DIV元素来实现这一点

//如果您有ID或类，则无需使用document.querySelector；
//使用document.getElementByID或document.getElementsByClassName
让addItem=document.getElementById（“addButton”）；
设newTab=document.getElementsByClassName（“添加”）；
let shoppingList=document.getElementById（“购物清单”）；
让priceInput=document.getElementById（“价格”）；
让productInput=document.getElementById（“产品”）；
让total=document.getElementById（“total”）；
addItem.addEventListener（“单击”，添加产品）；
函数addProduct（）{
if（priceInput.value==“”| | isNaN（priceInput.value））{
返回；
}
//与类一起使用列表项（LI）和容器（DIV），而不是使用行和单元格
让listItem=document.createElement（'li'）；
让removeBtn=document.createElement（“按钮”）；
让productDiv=document.createElement（'div'）；
让priceDiv=document.createElement（'div'）；
让totalDiv=document.createElement（'div'）；
//将容器添加到列表项中
listItem.appendChild（removeBtn）；
listItem.appendChild（productDiv）；
listItem.appendChild（priceDiv）；
listItem.appendChild（totalDiv）；
//将内容添加到相应的容器中
productDiv.classList.add（'product'）；
productDiv.innerHTML=productInput.value；
priceDiv.classList.add（'price'）；
priceDiv.innerHTML=parseFloat（priceInput.value）；
totalDiv.classList.add（'total'）；
totalDiv.innerHTML=parseFloat（price.value）；
removeBtn.innerHTML=“删除项目”；
removeBtn.addEventListener（“单击”），函数（事件）{
this.parentElement.classList.toggle（“完成”）；
displayTotal（）；
});
//将列表项添加到购物列表
shoppingList.prepend（listItem）；
displayTotal（）；
}
函数displayTotal（）{
var toPay=document.getElementsByClassName（“总计”）；
var-suma=0；
对于（var n=0；n

li.complete{
显示：无；
}
/*TODO:添加样式*/

添加项

总数0

你应该做研究。这不是一个免费的代码编写服务。我知道并做了研究，发现了在html上应该做什么，但从javascript上我应该做什么？我真的没有找到任何好方法来更改这些插入。手机你似乎拥有将其放入列表所需的一切。首先使用

document.createElement（）

创建UL节点，然后对LI节点执行相同的多次操作，每次都将其附加到UL节点。@Mikey我在使用dom元素（如apendChild（）和createElement（））时仍然有点笨拙，在这种情况下我应该如何操作？让productInput=document.createElement（'ul'）；让productInput=appendChild（'li'）；让priceInput=document.createElement（'ul'）；让priceInput=appendChild（'li'）；类似这样的东西？谢谢，我现在明白了，在你的评论之后，我对如何替换单元格感到有点困惑，开始制作“var li=document.createElement（“li”）；var nameNode=document.createTextNode（name）var lis=document.createElement（“li”）；var priceNode=document.createTextNode（price）；“但是没有得到它，因为第二个输入被第一个输入“吃掉”，现在我明白了，我需要先为所有输入创建元素，然后使用html上的总数来替换其余的，非常感谢！