Thẻ template trong HTML – Sử dụng thẻ Template khi nào?
Với thẻ template thì bạn có thể ẩn đi layout và sẽ gọi chúng ra khi có một sự kiện. Cùng mình tìm hiểu thẻ template này nhé!
Thẻ template trong HTML là gì?
Cú pháp:
<template> </template>
Thẻ này chứa code giao diện dùng để nhắc trình duyệt rằng nó không phải là 1 phần tử cần render ra để hiển thị mà nó là 1 phần từ html trong code thực thi.
Bạn có thể hiểu nó như là một giao diện dược lập trình sẵn nhưng chưa được hiện ra trên trình duyệt cần có 1 “sự kiện” để kích hoạt nó trên trình duyệt, giống như ví dụ dưới đây.
Ví dụ:
<!DOCTYPE html>
<html>
<body>
<h1>Thẻ Template trong HTML</h1>
<p>Click vào nút nhấn thì sẽ hiện các nội chưa chưa được hiện</p>
<button onclick="showContent()">bear</button>
<button onclick="showContent1()">banana</button>
<template>
<h2>Bear</h2>
<img src="https://st.quantrimang.com/photos/image/2020/07/24/Hinh-nen-We-Bare-Bear-1.png" width="300" height="200">
</template>
<template>
<h2>Banana</h2>
<img src="https://i.pinimg.com/originals/14/f1/01/14f101a28f7
bf7f860f3b3a8fd3fae4c.png" width="300" height="200">
</template>
<script>
function showContent() {
var temp = document.getElementsByTagName("template")[0];
var clon = temp.content.cloneNode(true);
document.body.appendChild(clon);
}
function showContent1() {
var temp = document.getElementsByTagName("template")[1];
var clon = temp.content.cloneNode(true);
document.body.appendChild(clon);
}
</script>
</body>
</html>
Để xem kết quả các khác bạn click tại đây
Nội dung bên trong thẻ được hiển thị bằng cách lập trình Script cho chúng, để quá trình diễn ra nhanh chóng và mượt mà hơn.
Sử dụng thẻ Template khi nào?
Việc sử dụng thẻ template tùy thuộc yêu cầu của khách hàng mà có sử dụng thẻ này không.
Nếu cảm thấy bài viết hay thì nhớ Like và Share để mọi người cùng biết nhé.
Vẫn còn nhiều thẻ khác để các bạn tìm hiểu, các bạn kích chuột tại đây
