Các mẫu html hoạt động như thế nào?

Với việc React, Vue, Angular và tất cả các khung JavaScript giao diện người dùng khác trở nên phổ biến, nhiều người quên mất HTML và JavaScript thông thường, nhưng hầu hết các trang web được xây dựng ngày nay vẫn sử dụng HTML và JavaScript đơn giản. Ngay cả khi các khung giao diện người dùng ngày càng trở nên phổ biến, vẫn có nhiều trang web không hợp lý để xây dựng với một khung giao diện người dùng đầy đủ vì chúng gần như không đủ phức tạp. Tuy nhiên, vẫn có thể cần một số nội dung động phức tạp và theo truyền thống, điều đó có thể gây khó khăn lớn khi thực hiện trong JavaScript đơn giản. May mắn thay, thẻ mẫu trong HTML giúp việc thêm nội dung động dễ dàng hơn nhiều so với trước đây

Nếu bạn muốn học trực quan, hãy xem phiên bản video của bài viết này

Thẻ mẫu là gì?

Thẻ mẫu là một thẻ HTML cho phép bạn tạo một nhóm các phần tử HTML không được hiển thị trên trang. Bạn có thể coi nó giống như một thẻ div không có màn hình chứa HTML bên trong, nhưng thẻ mẫu có một số tính năng hữu ích giúp làm việc dễ dàng hơn so với thẻ div không có màn hình

Trước hết, việc sử dụng thẻ mẫu cho thấy rất rõ ràng rằng HTML bên trong nó được sử dụng trong JavaScript để hiển thị nội dung động. Thứ hai, thẻ mẫu có các phương thức rất tiện dụng để sao chép nội dung bên trong nó để có thể thêm nó vào DOM nhiều lần. Do đó, trường hợp sử dụng tốt nhất cho thẻ mẫu là một danh sách có thể được thêm động vào

<ul>
  <li>
    <span>Item 1: span>
    <span>Content 1span>
  li>
  <li>
    <span>Item 2: span>
    <span>Content 2span>
  li>
ul>

Trong ví dụ trên, nếu bạn muốn thêm một phần tử mới vào danh sách thì tất cả HTML cho li sẽ cần phải ở dạng mã JavaScript rất lộn xộn và dễ bị lỗi, nhưng bằng cách thêm thẻ mẫu vào HTML ở trên, chúng ta có thể

<ul>
  <li>
    <span>Item 1: span>
    <span>Content 1span>
  li>
  <li>
    <span>Item 2: span>
    <span>Content 2span>
  li>
ul>

<template>
  <li>
    <span>Item: span>
    <span>Contentspan>
  li>
template>

Bây giờ, li của chúng ta được xác định bằng HTML và bằng JavaScript, chúng ta chỉ cần lấy nội dung mẫu và sao chép nó vào danh sách ban đầu của chúng ta. Hãy nói về cách làm điều đó

Cách sử dụng thẻ mẫu trong JavaScript

Trước tiên, chúng tôi cần thêm một số id/lớp vào HTML của mình để có thể chọn các thành phần trong JavaScript. Hãy cũng thêm vào một nút để thêm một mục mới

<ul id="list">
  <li>
    <span>Item 1: span>
    <span>Content 1span>
  li>
  <li>
    <span>Item 2: span>
    <span>Content 2span>
  li>
ul>
<button id="add-item">Add Itembutton>

<template id="list-item-template">
  <li>
    <span class="title">Item: span>
    <span class="content">Contentspan>
  li>
template>

Bây giờ với cách đó, chúng ta có thể đi sâu vào JavaScript

const template = document.getElementById('list-item-template')
const list = document.getElementById('list')
const button = document.getElementById('add-item')
let itemCount = list.children.length

button.addEventListener('click', () => {
  const item = template.content.cloneNode(true)
  itemCount++
  item.querySelector('.title').innerText = `Item ${itemCount}: `
  item.querySelector('.content').innerText = `Content ${itemCount}`
  list.append(item)
})

Ở đầu JavaScript này, chúng tôi sẽ nhận được các tham chiếu đến mẫu, danh sách, nút và số lượng mục trong danh sách. Từ đó, chúng tôi sẽ thêm một trình xử lý sự kiện cho nút khi nhấp để thêm mục mới của chúng tôi. Dòng tiếp theo là nơi tất cả sự kỳ diệu của mẫu phát huy tác dụng

const item = template.content.cloneNode(true)

Trên dòng này, chúng tôi đang lấy nội dung của mẫu, đó là li và sao chép nó. Bằng cách chuyển true sang

<ul>
  <li>
    <span>Item 1: span>
    <span>Content 1span>
  li>
  <li>
    <span>Item 2: span>
    <span>Content 2span>
  li>
ul>

<template>
  <li>
    <span>Item: span>
    <span>Contentspan>
  li>
template>

0, chúng tôi cũng đảm bảo rằng chúng tôi sao chép tất cả các phần tử con bên trong li. Sau đó, tất cả những gì chúng ta cần làm là JavaScript bình thường để thay đổi tiêu đề và nội dung theo ý thích của mình trước khi thêm phần tử vào cuối danh sách

Như bạn có thể thấy không có mã HTML trong JavaScript của chúng tôi, điều này làm cho JavaScript dễ làm việc hơn nhiều. Nó cũng ngăn ngừa bất kỳ lỗi tiềm ẩn nào khi sử dụng

<ul>
  <li>
    <span>Item 1: span>
    <span>Content 1span>
  li>
  <li>
    <span>Item 2: span>
    <span>Content 2span>
  li>
ul>

<template>
  <li>
    <span>Item: span>
    <span>Contentspan>
  li>
template>

1 hoặc chỉ gõ sai nội dung nào đó trong HTML

Sự kết luận

Mặc dù các khung giao diện người dùng là điều mà mọi người đều nói đến, nhưng không phải ai cũng xây dựng trang web với chúng. Có một công cụ như thẻ mẫu để làm việc với JavaScript động dễ dàng hơn là một bổ sung tuyệt vời cho chuỗi công cụ của bạn và là thứ bạn chắc chắn sẽ cần trong tương lai

Cấu trúc cơ bản của các mẫu HTML là gì?

Tại sao nên sử dụng các mẫu HTML?

Tôi có thể sử dụng các mẫu HTML miễn phí không?

Mục đích của một mẫu trang web là gì?