javascript - 我可以使用 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>