如何添加相同的节点两次与append()?

Question

我想添加节点命名为卡到容器两次，但方式1没有工作。所以我解出了方法2。但它看起来不像是好的代码。所以我想用另一种方法
请教教我。

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

您必须"重新克隆"该行才能再次追加它。不能再添加相同的元素。尝试使用克隆函数，比如

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>