0
我想创建一个与产品名称，产品成本，产品数量，产品总和和删除按钮的新行。完全如同示例中两个第一行的结构。我相信我可以使用insertAdjacentHTML，但我无法让它工作。我可以使用insertAdjacentHTML添加一长串html标签和文本吗？
我已经定义了名称，unitPrice，quantityInput，itemSum和deleteButton。这五个html字符串我想追加到rowDiv和追加rowDiv后的最后一行（列表中的最后一个产品）。我究竟做错了什么？我附上下面的代码：
功能createNewItemRow：
function createNewItemRow() {
const newProductName = document.getElementById("new-product-name");
const newProductCostPerUnit = document.getElementById(
"new-product-cost-per-unit",
);
const name = `<div><span class="product-name">${newProductName.value}</span></div>`;
const unitPrice = `<div>$<span class="cost-per-unit">${newProductCostPerUnit.value}</span></div>`;
const quantityInput =
'<div><span>QTY</span><input type="text" name="quantity" class="quantity"></div>';
const itemSum = '<div>$<span class="item-sum">0.00</span></div>';
const deleteButton =
'<div><button class="btn btn-delete">Delete</button></div>';
const container = document.getElementById("container");
const rowItem = container.lastChild;
const rowDiv = document.createElement("div");
rowDiv.setAttribute("class", "row");
// USE insertAdjacentHTML and add:
const string = name + unitPrice + itemSum + deleteButton;
rowDiv.insertAdjacentHTML("beforeend", string);
// Append the rowDiv with the new data to after last row inside the container.
rowItem.appendChild(rowDiv);
}
function deleteItem(e) {
const del = e.currentTarget.parentElement.parentElement;
const parent = del.parentElement;
parent.removeChild(del);
getTotalPrice();
}
function getTotalPrice() {
const costPerUnit = document.getElementsByClassName("cost-per-unit");
const inputValue = document.getElementsByClassName("quantity");
const itemSum = document.getElementsByClassName("item-sum");
const totalPrice = document.getElementById("total-price");
let total = 0;
for (let i = 0; i < costPerUnit.length; i++) {
const sum = costPerUnit[i].innerHTML * inputValue[i].value;
itemSum[i].innerHTML = sum;
total += sum;
}
totalPrice.innerHTML = total;
}
function createNewItemRow() {
const newProductName = document.getElementById("new-product-name");
const newProductCostPerUnit = document.getElementById(
"new-product-cost-per-unit",
);
const name = `<div><span class="product-name">${newProductName.value}</span></div>`;
const unitPrice = `<div>$<span class="cost-per-unit">${newProductCostPerUnit.value}</span></div>`;
const quantityInput =
'<div><span>QTY</span><input type="text" name="quantity" class="quantity"></div>';
const itemSum = '<div>$<span class="item-sum">0.00</span></div>';
const deleteButton =
'<div><button class="btn btn-delete">Delete</button></div>';
const container = document.getElementById("container");
const rowItem = container.lastChild;
const rowDiv = document.createElement("div");
rowDiv.setAttribute("class", "row");
// USE insertAdjacentHTML and add:
const string = name + unitPrice + itemSum + deleteButton;
rowDiv.insertAdjacentHTML("beforeend", string);
// Append the rowDiv with the new data to after last row inside the container.
rowItem.appendChild(rowDiv);
}
function refreshItems(deleteButtons) {
for (var i = 0; i < deleteButtons.length; i++) {
deleteButtons[i].onclick = deleteItem;
}
}
window.onload = function() {
const calculatePriceButton = document.getElementById("calc-prices-button");
const createItemButton = document.getElementById("new-item-create");
const deleteButtons = document.getElementsByClassName("btn-delete");
refreshItems(deleteButtons);
};input {
border: solid 1px black;
}
#new-product-name {
width: 130px;
}
#new-product-cost-per-unit {
width: 120px;
}
.row {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 20px;
}
.row-new-product {
margin: 20px;
}
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.btn-success {
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
}
.btn-delete {
color: #fff;
background-color: #cf000f;
border-color: #cf000f;
}
.quantity {
margin: 0 5px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./css/style.css">
<script type="text/javascript" src="./js/index.js"></script>
<title>Ironhack cart</title>
</head>
<body>
<div id="container">
<div class="row">
<div>
<span class="product-name">IronBubble-head</span>
</div>
<div>
$
<span class="cost-per-unit">25</span>
</div>
<div>
<span>QTY</span>
<input type="text" name="quantity" class="quantity">
</div>
<div>
$
<span class="item-sum">0.00</span>
</div>
<div>
<button class="btn btn-delete">Delete</button>
</div>
</div>
<div class="row">
<div>
<span class="product-name">IronBubble-foot</span>
</div>
<div>
$
<span class="cost-per-unit">50</span>
</div>
<div>
<span>QTY</span>
<input type="text" name="quantity" class="quantity">
</div>
<div>
$
<span class="item-sum">0.00</span>
</div>
<div>
<button class="btn btn-delete">Delete</button>
</div>
</div>
</div>
<div class="row-new-product">
<div>
Product:
<input type="text" id="new-product-name">
</div>
<div>
Cost:
<input type="text" id="new-product-cost-per-unit">
</div>
<div>
<button class="btn btn-success" onclick="createNewItemRow()">Create</button>
</div>
</div>
<div class="wrapper ">
<button class="btn btn-success" id="calc-prices-button " onclick="getTotalPrice() ">Calculate Prices</button>
Total Price $
<span id="total-price">0.00</span>
</div>
</body>
</html>
您是否尝试过使用'container.lastElementChild'，而不是'container.lastChild'？因为'lastChild'可能是文本节点。 – Krusader
你的问题包含太多的代码。 [创建一个最简单的例子]（https://stackoverflow.com/help/mcve）和[把它变成一个可运行的代码块]（https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript- CSS-和HTML的代码段/）。 – mercator