当我尝试在javascript中创建节点时，为什么我的<span>被删除

Question

我正在尝试通过Javascript中的DOM节点在模式框中创建HTML段落标签。此方法有效，但是每次添加名称时，都会删除HTML页面中的H2元素。我不知道为什么。

我尝试更改标签名称以查看是否会有所不同，并且我还尝试将它们附加到单独的变量中以仅显示它，但似乎无济于事，并且我正尝试避免辛苦-对此进行编码。

当用户单击添加到购物车选项时，该项目应添加到模式框

正在发生的事情是，它已添加到模式框中，但H2元素已从HTML页面中删除。

let modal = document.getElementById("modal-box");
let modalCont = document.getElementsByClassName("modal-content")[0];
let openBtn = document.getElementById("modalOpen");
let span = document.getElementsByClassName("close-button")[0];

openBtn.addEventListener("click", function() {
  modal.style.display = "block";
});

span.addEventListener("click", function() {
  modal.style.display = "none";
});

function addCartItems(num) {
  document.getElementById("emptyCart").style.display = "none";
  let pName = document.getElementsByClassName("productName")[num - 1];
  let pPrice = document.getElementsByClassName("price")[num - 1];

  let para = document.createElement("p");
  let statement = document.createTextNode("Quantity");
  modalCont.appendChild(para.appendChild(pName));

}

.flex-productContainer {
  display: flex;
  position: relative;
  top: 0%;
  height: auto;
  left: 0%;
  right: 0%;
  background-color: black;
}

.productContainer {
  display: flex;
  position: relative;
  left: 5%;
  right: 5%;
  height: auto;
  width: 90%;
  background-color: #FFFFFF;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.categoryHeader {
  height: fit-content;
  color: black;
  background: whitesmoke;
  width: 100%;
  text-align: center;
  padding-bottom: 15px;
  padding-top: 15px;
}

.productCategory {
  margin: 0;
  padding: 0;
  height: fit-content;
  width: 100%;
}

img {
  height: 250px;
  width: 300px;
}

.ishoe1 {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  width: 300px;
  height: fit-content;
  margin-top: 0;
  margin-bottom: 2%;
  margin-left: 6%;
  text-align: center;
}

.productButton {
  border: none;
  outline: 0;
  color: #FFFFFF;
  padding: 12px;
  background-color: dimgrey;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
  transition: ease 0.3s;
}

.productButton:hover {
  /*opacity: 0.7;*/
  background-color: #E06688;
  color: #FFFFFF;
}

.productButton:active {
  background-color: #9a475d;
  box-shadow: 1px 3px 4px #713643;
}

.price {
  font-size: 30px;
  color: grey;
  font-weight: bold;
  margin: 20px;
}

.box {
  height: 250px;
  width: 300px;
  overflow: hidden;
  background-size: 300px 250px;
}

.hid-box {
  top: 100%;
  position: relative;
  transition: all .3s ease-out;
  background: rgba(0, 0, 0, 0.7);
  height: 100%;
}

.box:hover>.hid-box {
  top: 0;
}

.productInfo {
  color: whitesmoke;
}

.box1 {
  background-image: url("../img/badminton/b4.jpg");
}

.box2 {
  background-image: url("../img/badminton/b3.jpg");
}

.box3 {
  background-image: url("../img/badminton/b6.jpg");
}

.box4 {
  background-image: url("../img/basketball/bbRebok1.1.jpg");
}

.box5 {
  background-image: url("../img/basketball/bbmenshoe3.jpg");
}

.box6 {
  background-image: url("../img/basketball/bbmenshoe2.jpg");
}

.showCart {
  position: relative;
  left: 80%;
  margin-top: 1%;
}


/*Shopping cart page css*/

.cartHeaderSection {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.header {
  margin: 2%;
  padding: 1%;
  height: 10%;
  width: 15%;
  border: black 2px;
  background-color: #E06688;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  text-align: center;
}

.itemEntrySection {
  height: auto;
  width: 100%;
  background-color: gray;
}

.cart-row {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.cart-column {
  margin-right: 18%;
  margin-bottom: 20px;
  margin-left: 2%;
}

.modal-box {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(27, 27, 27);
}

.modal-content {
  display: flex;
  flex-direction: column;
  margin-left: 25%;
  margin-right: 25%;
  margin-top: 2%;
  padding: 20px;
  border: 1px solid #888;
  width: 50%;
  color: #fff;
}

.close-button {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  transition: ease 0.2s;
  user-select: none;
}

.close:hover,
.close:focus {
  color: #F4511E;
  text-decoration: none;
  cursor: pointer;
}

<html>

<body>
  <div class="productContainer">
    <div class="showCart">
      <button id="modalOpen" class="showCartBtn">SHOW CART</button>
    </div>
    <div class="productCategory">
      <h1 class="categoryHeader">Indoor Sports - Badminton</h1>
    </div>

    <div class="ishoe1">
      <div class="box box1">
        <div class="hid-box">
          <p class="productInfo">Flexible,indoor wear,excellent grip , ladies footwear</p>
          <button class="viewProduct">View Product</button>
        </div>
      </div>
      <span class="productName">Badminton Shoes</span>
      <p class="price">$63</p>
      <button id="p1" class="productButton" onclick="addCartItems(1)">ADD to Cart</button>


    </div>

    <div class="ishoe1">
      <div class="box box2">
        <div class="hid-box">
          <p class="productInfo">Flexible,indoor wear,excellent grip , ladies footwear</p>
          <button class="viewProduct">View Product</button>
        </div>
      </div>
      <span class="productName">Badminton Shoes</span>
      <p class="price">$63</p>
      <button id="p2" class="productButton" onclick="addCartItems(2)">ADD to Cart</button>


    </div>

    <div class="ishoe1">
      <div class="box box3">
        <div class="hid-box">
          <p class="productInfo">Flexible,indoor wear,excellent grip , ladies footwear</p>
          <button class="viewProduct">View Product</button>
        </div>
      </div>
      <span class="productName">Badminton Shoes</span>
      <p class="price">$63</p>
      <button id="p3" class="productButton" onclick="addCartItems(3)">ADD to Cart</button>


    </div>

    <div class="productCategory">
      <h1 class="categoryHeader">Outdoor Sports - Basketball</h1>
    </div>

    <div class="ishoe1">
      <div class="box box4">
        <div class="hid-box">
          <p class="productInfo">Flexible,indoor wear,excellent grip , ladies footwear</p>
          <button class="viewProduct">View Product</button>
        </div>
      </div>
      <span class="productName">Basketball Shoes</span>
      <p class="price">$63</p>
      <button id="p4" class="productButton" onclick="addCartItems(4)">ADD to Cart</button>


    </div>

    <div class="ishoe1">
      <div class="box box5">
        <div class="hid-box">
          <p class="productInfo">Flexible,indoor wear,excellent grip , ladies footwear</p>
          <button class="viewProduct">View Product</button>
        </div>
      </div>
      <span class="productName">Basketball Shoes</span>
      <p class="price">$63</p>
      <button id="p5" class="productButton" onclick="addCartItems(5)">ADD to Cart</button>


    </div>

    <div class="ishoe1">
      <div class="box box6">
        <div class="hid-box">
          <p class="productInfo">Flexible,indoor wear,excellent grip , ladies footwear</p>
          <button class="viewProduct">View Product</button>
        </div>
      </div>
      <span class="productName">Basketball Shoes</span>
      <p class="price">$63</p>
      <button id="p6" class="productButton" onclick="addCartItems(6)">ADD to Cart</button>
    </div>

  </div>
  <div id="modal-box" class="modal-box">
    <div class="modal-content">
      <span class="close-button">&times;</span>
      <p id="emptyCart">You have no items in your cart</p>
    </div>
  </div>
  </div>
  <script type="text/javascript" src="../js/external.js"></script>
</body>

</html>

Answer 1

调用para.appendChild(pName)时，它会将元素从原始位置删除，然后将其移动到新的父元素，而您可以像para.appendChild(pName.cloneNode(true)一样克隆它

let modal = document.getElementById("modal-box");
let modalCont = document.getElementsByClassName("modal-content")[0];
let openBtn = document.getElementById("modalOpen");
let span = document.getElementsByClassName("close-button")[0];

openBtn.addEventListener("click", function() {
  modal.style.display = "block";
});

span.addEventListener("click", function() {
  modal.style.display = "none";
});

function addCartItems(num) {
  document.getElementById("emptyCart").style.display = "none";
  let pName = document.getElementsByClassName("productName")[num - 1];
  let pPrice = document.getElementsByClassName("price")[num - 1];

  let para = document.createElement("p");
  let statement = document.createTextNode("Quantity");
  modalCont.appendChild(para.appendChild(pName.cloneNode(true)));

}

.flex-productContainer {
  display: flex;
  position: relative;
  top: 0%;
  height: auto;
  left: 0%;
  right: 0%;
  background-color: black;
}

.productContainer {
  display: flex;
  position: relative;
  left: 5%;
  right: 5%;
  height: auto;
  width: 90%;
  background-color: #FFFFFF;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.categoryHeader {
  height: fit-content;
  color: black;
  background: whitesmoke;
  width: 100%;
  text-align: center;
  padding-bottom: 15px;
  padding-top: 15px;
}

.productCategory {
  margin: 0;
  padding: 0;
  height: fit-content;
  width: 100%;
}

img {
  height: 250px;
  width: 300px;
}

.ishoe1 {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  width: 300px;
  height: fit-content;
  margin-top: 0;
  margin-bottom: 2%;
  margin-left: 6%;
  text-align: center;
}

.productButton {
  border: none;
  outline: 0;
  color: #FFFFFF;
  padding: 12px;
  background-color: dimgrey;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
  transition: ease 0.3s;
}

.productButton:hover {
  /*opacity: 0.7;*/
  background-color: #E06688;
  color: #FFFFFF;
}

.productButton:active {
  background-color: #9a475d;
  box-shadow: 1px 3px 4px #713643;
}

.price {
  font-size: 30px;
  color: grey;
  font-weight: bold;
  margin: 20px;
}

.box {
  height: 250px;
  width: 300px;
  overflow: hidden;
  background-size: 300px 250px;
}

.hid-box {
  top: 100%;
  position: relative;
  transition: all .3s ease-out;
  background: rgba(0, 0, 0, 0.7);
  height: 100%;
}

.box:hover>.hid-box {
  top: 0;
}

.productInfo {
  color: whitesmoke;
}

.box1 {
  background-image: url("../img/badminton/b4.jpg");
}

.box2 {
  background-image: url("../img/badminton/b3.jpg");
}

.box3 {
  background-image: url("../img/badminton/b6.jpg");
}

.box4 {
  background-image: url("../img/basketball/bbRebok1.1.jpg");
}

.box5 {
  background-image: url("../img/basketball/bbmenshoe3.jpg");
}

.box6 {
  background-image: url("../img/basketball/bbmenshoe2.jpg");
}

.showCart {
  position: relative;
  left: 80%;
  margin-top: 1%;
}


/*Shopping cart page css*/

.cartHeaderSection {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.header {
  margin: 2%;
  padding: 1%;
  height: 10%;
  width: 15%;
  border: black 2px;
  background-color: #E06688;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  text-align: center;
}

.itemEntrySection {
  height: auto;
  width: 100%;
  background-color: gray;
}

.cart-row {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.cart-column {
  margin-right: 18%;
  margin-bottom: 20px;
  margin-left: 2%;
}

.modal-box {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(27, 27, 27);
}

.modal-content {
  display: flex;
  flex-direction: column;
  margin-left: 25%;
  margin-right: 25%;
  margin-top: 2%;
  padding: 20px;
  border: 1px solid #888;
  width: 50%;
  color: #fff;
}

.close-button {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  transition: ease 0.2s;
  user-select: none;
}

.close:hover,
.close:focus {
  color: #F4511E;
  text-decoration: none;
  cursor: pointer;
}

<html>

<body>
  <div class="productContainer">
    <div class="showCart">
      <button id="modalOpen" class="showCartBtn">SHOW CART</button>
    </div>
    <div class="productCategory">
      <h1 class="categoryHeader">Indoor Sports - Badminton</h1>
    </div>

    <div class="ishoe1">
      <div class="box box1">
        <div class="hid-box">
          <p class="productInfo">Flexible,indoor wear,excellent grip , ladies footwear</p>
          <button class="viewProduct">View Product</button>
        </div>
      </div>
      <span class="productName">Badminton Shoes</span>
      <p class="price">$63</p>
      <button id="p1" class="productButton" onclick="addCartItems(1)">ADD to Cart</button>


    </div>

    <div class="ishoe1">
      <div class="box box2">
        <div class="hid-box">
          <p class="productInfo">Flexible,indoor wear,excellent grip , ladies footwear</p>
          <button class="viewProduct">View Product</button>
        </div>
      </div>
      <span class="productName">Badminton Shoes</span>
      <p class="price">$63</p>
      <button id="p2" class="productButton" onclick="addCartItems(2)">ADD to Cart</button>


    </div>

    <div class="ishoe1">
      <div class="box box3">
        <div class="hid-box">
          <p class="productInfo">Flexible,indoor wear,excellent grip , ladies footwear</p>
          <button class="viewProduct">View Product</button>
        </div>
      </div>
      <span class="productName">Badminton Shoes</span>
      <p class="price">$63</p>
      <button id="p3" class="productButton" onclick="addCartItems(3)">ADD to Cart</button>


    </div>

    <div class="productCategory">
      <h1 class="categoryHeader">Outdoor Sports - Basketball</h1>
    </div>

    <div class="ishoe1">
      <div class="box box4">
        <div class="hid-box">
          <p class="productInfo">Flexible,indoor wear,excellent grip , ladies footwear</p>
          <button class="viewProduct">View Product</button>
        </div>
      </div>
      <span class="productName">Basketball Shoes</span>
      <p class="price">$63</p>
      <button id="p4" class="productButton" onclick="addCartItems(4)">ADD to Cart</button>


    </div>

    <div class="ishoe1">
      <div class="box box5">
        <div class="hid-box">
          <p class="productInfo">Flexible,indoor wear,excellent grip , ladies footwear</p>
          <button class="viewProduct">View Product</button>
        </div>
      </div>
      <span class="productName">Basketball Shoes</span>
      <p class="price">$63</p>
      <button id="p5" class="productButton" onclick="addCartItems(5)">ADD to Cart</button>


    </div>

    <div class="ishoe1">
      <div class="box box6">
        <div class="hid-box">
          <p class="productInfo">Flexible,indoor wear,excellent grip , ladies footwear</p>
          <button class="viewProduct">View Product</button>
        </div>
      </div>
      <span class="productName">Basketball Shoes</span>
      <p class="price">$63</p>
      <button id="p6" class="productButton" onclick="addCartItems(6)">ADD to Cart</button>
    </div>

  </div>
  <div id="modal-box" class="modal-box">
    <div class="modal-content">
      <span class="close-button">&times;</span>
      <p id="emptyCart">You have no items in your cart</p>
    </div>
  </div>
  </div>
  <script type="text/javascript" src="../js/external.js"></script>
</body>

</html>