-
Chúng ta đã sử dụng `innerHTML` khá nhiều rồi, nhưng tôi muốn hướng dẫn nhanh cho các bạn
-
thêm một chút nữa.
-
Trước hết, hãy nhìn vào ví dụ, ngay tại vị trí ta thiết lập `innerHTML`.
-
Tôi vừa đưa vào một chuỗi, “all about cats”.
-
Nhưng, trên thực tế, tôi có thể đưa vào các tag HTML vào trong chuỗi.
-
Tôi có thể bao quanh “cats” với các tag ``,
-
và các bạn có thể thấy nó đã được in nghiêng.
-
Hoặc ở dưới đây, tôi đã chuyển “dog” thành “cat”,
-
tôi có thể bao quanh từ ấy với các tag ``,
-
và chúng sẽ được in đậm.
-
Thậm chí tôi có thể viết tag `` vào trong đây, hoặc đưa vào toàn bộ
-
HTML của trang web, nếu tôi thực sự muốn.
-
Vậy là gọn gàng rồi, vì điều đó có nghĩa là ta có thể làm rất nhiều thứ với `innerHTML`.
-
Nếu chỉ thay đổi văn bản, ta sẽ không cần dùng đến `innerHTML`.
-
Ta có thể sử dụng tính chất `textContent`, tức là trình duyệt
-
sẽ không dịch những gì ta đã đưa vào là HTML, và sẽ chỉ kết xuất dưới dạng văn bản thuần túy.
-
Hãy chú ý khi tôi thay đổi thành `textContent`
-
dấu ngoặc của tôi sẽ xuất hiện—ghê quá!
-
Như vậy, trong trường hợp đó, ta chỉ việc vứt chúng đi thôi, vì trình duyệt
-
từ chối biến chúng thành HTML thực.
-
Vì vậy nếu các bạn chỉ muốn thiết lập văn bản, hãy sử dụng `textContent`.
-
Nếu ta muốn đưa vào vài tag HTML, và muốn trình duyệt hiểu đó là HTML,
-
hãy sử dụng `innerHTML`.
-
Khi đã bắt đầu xử lý những DOM cao cấp hơn,
-
các bạn nên cẩn thận khi sử dụng `innerHTML` và `textContent`,
-
vì chúng cũng sẽ loại bỏ trình nghe sự kiện
-
mà ta đã liên kết với các phần tử bên trong,
-
các bạn sẽ được học sớm thôi.
-
Trong bài hướng dẫn tiếp theo, tôi sẽ hướng dẫn cho các bạn một cách còn phức tạp hơn nữa
-
giúp chèn phần tử và văn bản mới vào trang web.