gacor: Gunakan kembali markup sisi klien dengan elemen template HTML

Elemen templat menyimpan markup yang tidak dirender hingga kode mengkloningnya. Hal ini berguna untuk mengulang struktur kecil seperti baris hasil sambil menjaga markup tetap dapat dibaca dalam 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);
}

Isi teks sebagai teks

Gunakan textContent untuk nilai yang berasal dari pengguna atau data eksternal. Hindari menempatkan nilai-nilai tersebut ke dalam string HTML kecuali nilai tersebut telah dibersihkan dengan benar untuk konteks yang tepat.

Templat adalah sumber markup yang mudah digunakan, bukan sistem komponen tersendiri. Pertahankan konsistensi perilaku berulang dan label yang dapat diakses saat setiap klon diisi.