我可以使用 insertAdjacentHTML 添加一长串 html 标签和文本吗？

Question

我想创建一个包含产品名称、产品成本、产品数量、产品总和和删除按钮的新行。 与示例中前两行的结构完全相同。 我相信我可以使用insertAdjacentHTML ，但我无法让它工作。

我已经定义了 name、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>

Answer 1

您需要进行 4 次更改，添加行将起作用。

function createNewItemRow() {
  //rowItem is not needed 
  //const rowItem = container.lastChild;

  //added quantityInput
  const string = name + unitPrice + quantityInput + itemSum + deleteButton;

  //changed rowDiv.insertAdjacentHTML("beforeend", string); to:
  rowDiv.innerHTML = string;

  // changed rowItem.appendChild(rowDiv); to:
  container.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.toFixed(2); total += sum; } totalPrice.innerHTML = total.toFixed(2); } function createNewItemRow() { const deleteButtons = document.getElementsByClassName("btn-delete"); 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="number" 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 rowDiv = document.createElement("div"); rowDiv.setAttribute("class", "row"); const string = name + unitPrice + quantityInput + itemSum + deleteButton; rowDiv.innerHTML = string; container.appendChild(rowDiv); refreshItems(deleteButtons); } function refreshItems(deleteButtons) { for (var i = 0; i < deleteButtons.length; i++) { deleteButtons[i].onclick = deleteItem; } } window.onload = function() { 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.00</span> </div> <div> <span>QTY</span> <input type="number" 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.00</span> </div> <div> <span>QTY</span> <input type="number" 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="number" 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>