gacor: Reuse client-side markup with the HTML template element

The template element holds markup that is not rendered until code clones it. It is useful for repeating a small structure such as a result row while keeping the markup readable in HTML.

<template id="result-template">
  <li class="result">
    <a class="result-link"></a>
    <p class="result-summary"></p>
  </li>
</template>
<ul id="results"></ul>

const template = document.querySelector("#result-template");
const list = document.querySelector("#results");

function addResult(result) {
  const item = template.content.firstElementChild.cloneNode(true);
  item.querySelector(".result-link").textContent = result.title;
  item.querySelector(".result-link").href = result.url;
  item.querySelector(".result-summary").textContent = result.summary;
  list.append(item);
}

Populate text as text

Use textContent for values that come from users or external data. Avoid placing those values into an HTML string unless they are correctly sanitized for that exact context.

A template is a convenient markup source, not a component system by itself. Keep repeated behavior and accessible labels consistent as each clone is populated.