Clone a Card and Insert a Batch

A seed swap board has one example plant card. Make two more cards with the same nested structure without writing a new HTML string for each one.

How it works

cloneNode(true) copies an element and its descendants; false would copy only the outer element. Each clone is a separate node, so change its nested .plant-name span before attaching it. Avoid repeating id attributes in a copied subtree—this template uses classes instead. A DocumentFragment is a temporary holder, not a visible element: appending cards to it leaves the page unchanged until #plants.append(fragment) moves all its children into the real list. After insertion the fragment is empty; the browser did not add a wrapper around the cards. Clone nodes do not copy JavaScript listeners registered with addEventListener. The next section introduces a listener on a parent list that can handle buttons added later.

const batch = document.createDocumentFragment();
for (const name of ["Basil", "Mint"]) {
  const copy = example.cloneNode(true);
  copy.querySelector(".plant-name").textContent = name;
  batch.append(copy);
}
list.append(batch);

Try the preview

Run the preview: Thyme stays first, then Basil and Mint appear with their own Seed packet labels. Change the text in one clone to confirm the others do not change. Notice there is no fragment element around them in the Elements tree.

Remember

You used createElement to make one node and append to place it. A deep clone reuses existing structure, while a fragment lets you prepare multiple nodes before a single insertion.

The following exercise applies these ideas to a different page.