如何使用 append() 兩次添加相同的節點？

Question

我想將名為 card 的節點添加到容器中兩次，但 way1 沒有用。 所以我解決了way2。 但它看起來不是很好的代碼。 所以我想換個方式
請教我。

html

<div class="container">
      <div class="row">
          <div class="col-sm-4">
            <img src="https://via.placeholder.com/600" class="w-100">
            <h5 class="title">Card title</h5>
            <p class="price">price : 70000</p>
          </div>
      </div>
    </div>

js   //way1  didn't added two times

      let card = document.querySelector('.row').cloneNode(true) //want to add in container two times
      let container = document.querySelector('.container');
      
      container.append(card)
      container.append(card)   

js   //way2 to solve but doesn't look good
 
      let card = document.querySelector('.row').cloneNode(true);
      let card2 = document.querySelector('.row').cloneNode(true);
      let container = document.querySelector('.container');
      
      container.append(card, card2)
      

Answer 1

您必須“重新克隆”該行才能再次對其進行 append。 你不能再次 append 相同的元素。 嘗試使用克隆 function，例如

 const container = document.querySelector(`.container`); const cloneRow = _ => document.querySelector(`.container.row:first-child`).cloneNode(true); container.append(cloneRow()); container.append(cloneRow());

 <div class="container"> <div class="row"> <div class="col-sm-4"> <img src="https://via.placeholder.com/50" class="w-100"> <h5 class="title">Card title</h5> <p class="price">price: 70000</p> </div> </div> </div>

另一種方法是使用該行的 html 來復制/附加：

 const container = document.querySelector(`.container`); const nwRow = document.querySelector(`.row`).innerHTML; // add 5 rows for (let i = 0; i < 5; i += 1) { container.append( Object.assign( document.createElement(`div`), {className: `row`, innerHTML: nwRow} ) ); }

 <div class="container"> <div class="row"> <div class="col-sm-4"> <img src="https://via.placeholder.com/50" class="w-100"> <h5 class="title">Card title</h5> <p class="price">price: 70000</p> </div> </div> </div>