Rumah >hujung hadapan web >html tutorial >Bagaimana saya menggunakan elemen templat html5 untuk markup yang boleh diguna semula?
HTML5 memperkenalkan elemen <template></template>
, yang membolehkan anda membuat blok markup yang boleh diguna semula yang boleh dimasukkan beberapa kali dalam dokumen atau merentasi dokumen yang berbeza. Inilah cara menggunakannya dengan berkesan:
Membuat templat :
Pertama, tentukan templat anda dalam tag <template></template>
. Elemen ini dan kandungannya tidak akan diberikan sehingga mereka ditegaskan. Contohnya:
<code class="html"><template id="myTemplate"> <h2>Welcome, <span class="username"></span>!</h2> <p>Here is some content about you.</p> </template></code>
Meneliti templat :
Untuk menggunakan templat, anda perlu mengklon kandungannya dan memasukkannya ke dalam DOM. Anda boleh melakukan ini menggunakan JavaScript. Contohnya:
<code class="javascript">const template = document.getElementById('myTemplate'); const clone = template.content.cloneNode(true); document.body.appendChild(clone);</code>
Mengumpulkan templat :
Selepas pengklonan, anda boleh memanipulasi kandungan klon untuk mengisi sebarang data dinamik. Contohnya:
<code class="javascript">const usernameSpan = clone.querySelector('.username'); usernameSpan.textContent = 'JohnDoe';</code>
Menggunakan elemen templat HTML5 menyediakan beberapa manfaat untuk mengekalkan konsistensi kod:
Unsur -unsur templat HTML5 sememangnya dapat menyumbang kepada peningkatan prestasi pemuatan laman web dalam beberapa cara:
<template></template>
tidak diberikan pada mulanya, penyemak imbas boleh mula menjadikan kandungan yang kelihatan lebih cepat. Instantiasi kandungan sebenar berlaku kemudian melalui JavaScript, yang boleh ditangguhkan.Menggabungkan elemen templat HTML5 dengan JavaScript membolehkan anda membuat aplikasi web dinamik dan interaktif. Inilah cara melakukannya dengan berkesan:
<template></template>
dengan ruang letak untuk kandungan dinamik. Klon dan sesuaikan templat :
Gunakan JavaScript untuk mengklonkan kandungan templat dan mengisi dengan data dinamik:
<code class="javascript">const template = document.getElementById('myTemplate'); const clone = template.content.cloneNode(true); const usernameSpan = clone.querySelector('.username'); usernameSpan.textContent = 'JohnDoe'; document.body.appendChild(clone);</code>
Instantiation yang didorong oleh peristiwa :
Anda boleh meneliti templat berdasarkan interaksi pengguna atau acara lain. Sebagai contoh, anda boleh menggunakan templat untuk menambah item baru secara dinamik ke senarai:
<code class="javascript">document.getElementById('addItemButton').addEventListener('click', function() { const template = document.getElementById('itemTemplate'); const clone = template.content.cloneNode(true); const itemName = clone.querySelector('.itemName'); itemName.textContent = 'New Item'; document.getElementById('itemList').appendChild(clone); });</code>
Kemas kini kandungan dinamik :
Anda juga boleh menggunakan JavaScript untuk mengemas kini kandungan templat instantiated, membolehkan kemas kini dinamik tanpa perlu membuat semula keseluruhan halaman. Contohnya:
<code class="javascript">setInterval(function() { const templates = document.querySelectorAll('.dynamicTemplate'); templates.forEach(template => { const dynamicText = template.querySelector('.dynamicText'); dynamicText.textContent = new Date().toLocaleTimeString(); }); }, 1000);</code>
Dengan memanfaatkan templat HTML5 dengan JavaScript, anda boleh membuat aplikasi web yang sangat dinamik dan cekap yang kedua -dua pelaku dan boleh dikekalkan.
Atas ialah kandungan terperinci Bagaimana saya menggunakan elemen templat html5 untuk markup yang boleh diguna semula?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!