gacor: Reutilizar el marcado del lado del cliente con el elemento de plantilla HTML

El elemento de plantilla contiene marcado que no se representa hasta que el código lo clona. Es útil para repetir una estructura pequeña, como una fila de resultados, manteniendo el marcado legible en 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);
}

Rellenar texto como texto

Utilice textContent para valores que provienen de usuarios o datos externos. Evite colocar esos valores en una cadena HTML a menos que estén correctamente desinfectados para ese contexto exacto.

Una plantilla es una fuente de marcado conveniente, no un sistema de componentes en sí mismo. Mantenga el comportamiento repetido y las etiquetas accesibles consistentes a medida que se completa cada clon.