Chào mừng bạn đến với hướng dẫn ngắn dành cho người mới bắt đầu về cách thêm mã HTML vào Javascript. Vì vậy, cuối cùng bạn đã đạt đến điểm làm việc với cả HTML và Javascript, nhưng thách thức là bây giờ bạn phải thêm một số HTML vào một trang hiện có
Thêm mã HTML bằng Javascript thực sự là một quy trình đơn giản “lấy bộ chứa mục tiêu và chèn HTML”
- Bằng cách trực tiếp thay đổi hoặc thêm vào HTML bên trong
6John Doewindow.addEventListener["load", [] => { // [B] GET HTML ELEMENT var demoA = document.getElementById["demo"]; // [C] CREATE ELEMENT + SET CONTENTS var demoB = document.createElement["strong"]; demoB.innerHTML = " SAYS "; demoA.appendChild[demoB]; // [D] CREATE NEW TEXT NODE var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"]; demoA.appendChild[demoC]; }];
7John Doewindow.addEventListener["load", [] => { // [B] GET HTML ELEMENT var demoA = document.getElementById["demo"]; // [C] CREATE ELEMENT + SET CONTENTS var demoB = document.createElement["strong"]; demoB.innerHTML = " SAYS "; demoA.appendChild[demoB]; // [D] CREATE NEW TEXT NODE var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"]; demoA.appendChild[demoC]; }];
- Bằng cách tạo và chèn một phần tử mới
8John Doewindow.addEventListener["load", [] => { // [B] GET HTML ELEMENT var demoA = document.getElementById["demo"]; // [C] CREATE ELEMENT + SET CONTENTS var demoB = document.createElement["strong"]; demoB.innerHTML = " SAYS "; demoA.appendChild[demoB]; // [D] CREATE NEW TEXT NODE var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"]; demoA.appendChild[demoC]; }];
9John Doewindow.addEventListener["load", [] => { // [B] GET HTML ELEMENT var demoA = document.getElementById["demo"]; // [C] CREATE ELEMENT + SET CONTENTS var demoB = document.createElement["strong"]; demoB.innerHTML = " SAYS "; demoA.appendChild[demoB]; // [D] CREATE NEW TEXT NODE var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"]; demoA.appendChild[demoC]; }];
0John Doewindow.addEventListener["load", [] => { // [B] GET HTML ELEMENT var demoA = document.getElementById["demo"]; // [C] CREATE ELEMENT + SET CONTENTS var demoB = document.createElement["strong"]; demoB.innerHTML = " SAYS "; demoA.appendChild[demoB]; // [D] CREATE NEW TEXT NODE var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"]; demoA.appendChild[demoC]; }];
Chuẩn rồi. Cơ chế chọn-chèn này có vẻ đơn giản, nhưng thực tế có khá nhiều cách để chọn và chèn các phần tử. Vì vậy, chúng ta hãy xem qua một số ví dụ thực tế trong hướng dẫn này – Đọc tiếp
ⓘ Tôi đã bao gồm một tệp zip chứa tất cả mã nguồn ví dụ khi bắt đầu hướng dẫn này, vì vậy bạn không cần phải sao chép-dán mọi thứ… Hoặc nếu bạn chỉ muốn đi sâu vào
TRANG TRÌNH BÀY NHANH
TẢI XUỐNG & LƯU Ý
Đầu tiên, đây là liên kết tải xuống mã nguồn ví dụ như đã hứa
GHI CHÚ NHANH
Nếu bạn phát hiện ra một lỗi, hãy bình luận bên dưới. Tôi cũng cố gắng trả lời các câu hỏi ngắn, nhưng đó là một người so với cả thế giới… Nếu bạn cần câu trả lời gấp, vui lòng xem danh sách các trang web của tôi để được trợ giúp về lập trình
MÃ VÍ DỤ TẢI XUỐNG
Nhấp vào đây để tải xuống mã nguồn, tôi đã phát hành nó theo giấy phép MIT, vì vậy hãy thoải mái xây dựng trên mã nguồn hoặc sử dụng nó trong dự án của riêng bạn
CÁC CÁCH THÊM MÃ HTML
Được rồi, bây giờ chúng ta hãy chuyển sang các ví dụ thực tế – Cách chúng ta có thể làm việc với Javascript để thêm mã và các phần tử HTML
PHƯƠNG PHÁP 1] THAY ĐỔI TRỰC TIẾP MÃ HTML
1 mã trực tiếp. html
Foo Bar!
window.addEventListener["load", [] => {
// [B] GET HTML ELEMENT
var demo = document.getElementById["demo"];
console.log[demo];
// [C] THIS WILL REPLACE THE CONTENTS
demo.innerHTML = "John Doe";
// [D] THIS WILL APPEND TO THE CONTENTS
demo.innerHTML += " is NOT John Wick.";
}];
Phương thức đầu tiên này sẽ sử dụng thuộc tính
John Doe
window.addEventListener["load", [] => {
// [B] GET HTML ELEMENT
var demoA = document.getElementById["demo"];
// [C] CREATE ELEMENT + SET CONTENTS
var demoB = document.createElement["strong"];
demoB.innerHTML = " SAYS ";
demoA.appendChild[demoB];
// [D] CREATE NEW TEXT NODE
var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"];
demoA.appendChild[demoC];
}];
0 để thao tác trực tiếp với HTML- [A] Đầu tiên, chúng tôi cung cấp cho phần tử HTML một
1 duy nhấtJohn Doewindow.addEventListener["load", [] => { // [B] GET HTML ELEMENT var demoA = document.getElementById["demo"]; // [C] CREATE ELEMENT + SET CONTENTS var demoB = document.createElement["strong"]; demoB.innerHTML = " SAYS "; demoA.appendChild[demoB]; // [D] CREATE NEW TEXT NODE var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"]; demoA.appendChild[demoC]; }]; - [B] Sau đó chọn nó với
2 trong JavascriptJohn Doewindow.addEventListener["load", [] => { // [B] GET HTML ELEMENT var demoA = document.getElementById["demo"]; // [C] CREATE ELEMENT + SET CONTENTS var demoB = document.createElement["strong"]; demoB.innerHTML = " SAYS "; demoA.appendChild[demoB]; // [D] CREATE NEW TEXT NODE var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"]; demoA.appendChild[demoC]; }]; - [C & D] Cuối cùng, hãy lưu ý rằng
0 có thể được sử dụng theo hai hướngJohn Doewindow.addEventListener["load", [] => { // [B] GET HTML ELEMENT var demoA = document.getElementById["demo"]; // [C] CREATE ELEMENT + SET CONTENTS var demoB = document.createElement["strong"]; demoB.innerHTML = " SAYS "; demoA.appendChild[demoB]; // [D] CREATE NEW TEXT NODE var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"]; demoA.appendChild[demoC]; }];
4 để lấy nội dung hiện tạiJohn Doewindow.addEventListener["load", [] => { // [B] GET HTML ELEMENT var demoA = document.getElementById["demo"]; // [C] CREATE ELEMENT + SET CONTENTS var demoB = document.createElement["strong"]; demoB.innerHTML = " SAYS "; demoA.appendChild[demoB]; // [D] CREATE NEW TEXT NODE var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"]; demoA.appendChild[demoC]; }];
5 để thay thế nội dungJohn Doewindow.addEventListener["load", [] => { // [B] GET HTML ELEMENT var demoA = document.getElementById["demo"]; // [C] CREATE ELEMENT + SET CONTENTS var demoB = document.createElement["strong"]; demoB.innerHTML = " SAYS "; demoA.appendChild[demoB]; // [D] CREATE NEW TEXT NODE var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"]; demoA.appendChild[demoC]; }];
6 để thêm vào nội dung hiện cóJohn Doewindow.addEventListener["load", [] => { // [B] GET HTML ELEMENT var demoA = document.getElementById["demo"]; // [C] CREATE ELEMENT + SET CONTENTS var demoB = document.createElement["strong"]; demoB.innerHTML = " SAYS "; demoA.appendChild[demoB]; // [D] CREATE NEW TEXT NODE var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"]; demoA.appendChild[demoC]; }];
PHƯƠNG PHÁP 2] TẠO và NỐI CÁC PHẦN TỬ HTML
2-tạo-phần tử. html
John Doe
window.addEventListener["load", [] => {
// [B] GET HTML ELEMENT
var demoA = document.getElementById["demo"];
// [C] CREATE ELEMENT + SET CONTENTS
var demoB = document.createElement["strong"];
demoB.innerHTML = " SAYS ";
demoA.appendChild[demoB];
// [D] CREATE NEW TEXT NODE
var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"];
demoA.appendChild[demoC];
}];
Phương pháp này “hướng đối tượng” hơn một chút, tạo các phần tử HTML mới trong Javascript và nối chúng vào tài liệu
- [A & B] Như thường lệ, cung cấp cho phần tử HTML một
1. Sau đó sử dụngJohn Doewindow.addEventListener["load", [] => { // [B] GET HTML ELEMENT var demoA = document.getElementById["demo"]; // [C] CREATE ELEMENT + SET CONTENTS var demoB = document.createElement["strong"]; demoB.innerHTML = " SAYS "; demoA.appendChild[demoB]; // [D] CREATE NEW TEXT NODE var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"]; demoA.appendChild[demoC]; }];
8 để lấy nóJohn Doewindow.addEventListener["load", [] => { // [B] GET HTML ELEMENT var demoA = document.getElementById["demo"]; // [C] CREATE ELEMENT + SET CONTENTS var demoB = document.createElement["strong"]; demoB.innerHTML = " SAYS "; demoA.appendChild[demoB]; // [D] CREATE NEW TEXT NODE var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"]; demoA.appendChild[demoC]; }]; - [C] Nhưng thay vì thay thế trực tiếp
0, chúng tôi tạo một phần tử HTML mới để thay thếJohn Doewindow.addEventListener["load", [] => { // [B] GET HTML ELEMENT var demoA = document.getElementById["demo"]; // [C] CREATE ELEMENT + SET CONTENTS var demoB = document.createElement["strong"]; demoB.innerHTML = " SAYS "; demoA.appendChild[demoB]; // [D] CREATE NEW TEXT NODE var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"]; demoA.appendChild[demoC]; }];- Chúng tôi sử dụng
20 để tạo thẻ HTML mớiJohn Doewindow.addEventListener["load", [] => { // [B] GET HTML ELEMENT var demoA = document.getElementById["demo"]; // [C] CREATE ELEMENT + SET CONTENTS var demoB = document.createElement["strong"]; demoB.innerHTML = " SAYS "; demoA.appendChild[demoB]; // [D] CREATE NEW TEXT NODE var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"]; demoA.appendChild[demoC]; }]; - Sau đó thay đổi nội dung bằng cách sử dụng
21… Mà bạn đã biếtJohn Doewindow.addEventListener["load", [] => { // [B] GET HTML ELEMENT var demoA = document.getElementById["demo"]; // [C] CREATE ELEMENT + SET CONTENTS var demoB = document.createElement["strong"]; demoB.innerHTML = " SAYS "; demoA.appendChild[demoB]; // [D] CREATE NEW TEXT NODE var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"]; demoA.appendChild[demoC]; }]; - Cuối cùng, nối thêm phần tử mới vào phần tử gốc –
22John Doewindow.addEventListener["load", [] => { // [B] GET HTML ELEMENT var demoA = document.getElementById["demo"]; // [C] CREATE ELEMENT + SET CONTENTS var demoB = document.createElement["strong"]; demoB.innerHTML = " SAYS "; demoA.appendChild[demoB]; // [D] CREATE NEW TEXT NODE var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"]; demoA.appendChild[demoC]; }];
- Chúng tôi sử dụng
- [D] Nếu bạn chỉ muốn nối thêm văn bản, thay vào đó hãy tạo một nút văn bản –
23John Doewindow.addEventListener["load", [] => { // [B] GET HTML ELEMENT var demoA = document.getElementById["demo"]; // [C] CREATE ELEMENT + SET CONTENTS var demoB = document.createElement["strong"]; demoB.innerHTML = " SAYS "; demoA.appendChild[demoB]; // [D] CREATE NEW TEXT NODE var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"]; demoA.appendChild[demoC]; }];
LỰA CHỌN và CHÈN HTML THÊM
Càng xa càng tốt?
NHẬN CÁC PHẦN TỬ HTML TRONG JAVASCRIPT
3 phần tử. html
John Doe
window.addEventListener["load", [] => {
// [B] GET HTML ELEMENT
var demoA = document.getElementById["demo"];
// [C] CREATE ELEMENT + SET CONTENTS
var demoB = document.createElement["strong"];
demoB.innerHTML = " SAYS ";
demoA.appendChild[demoB];
// [D] CREATE NEW TEXT NODE
var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"];
demoA.appendChild[demoC];
}];
2Lấy các phần tử theo id không phải là cách duy nhất trong Javascript. Còn rất nhiều bạn nên lưu ý
MethodDescriptionReference____124Nhận phần tử HTML với ID đã cho. Bấm vào đây
John Doe
window.addEventListener["load", [] => {
// [B] GET HTML ELEMENT
var demoA = document.getElementById["demo"];
// [C] CREATE ELEMENT + SET CONTENTS
var demoB = document.createElement["strong"];
demoB.innerHTML = " SAYS ";
demoA.appendChild[demoB];
// [D] CREATE NEW TEXT NODE
var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"];
demoA.appendChild[demoC];
}];
25Nhận phần tử HTML với tên đã cho. Bấm vào đây
John Doe
window.addEventListener["load", [] => {
// [B] GET HTML ELEMENT
var demoA = document.getElementById["demo"];
// [C] CREATE ELEMENT + SET CONTENTS
var demoB = document.createElement["strong"];
demoB.innerHTML = " SAYS ";
demoA.appendChild[demoB];
// [D] CREATE NEW TEXT NODE
var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"];
demoA.appendChild[demoC];
}];
26Nhận tất cả các phần tử với tên lớp CSS đã cho. Nhấp vào đây
John Doe
window.addEventListener["load", [] => {
// [B] GET HTML ELEMENT
var demoA = document.getElementById["demo"];
// [C] CREATE ELEMENT + SET CONTENTS
var demoB = document.createElement["strong"];
demoB.innerHTML = " SAYS ";
demoA.appendChild[demoB];
// [D] CREATE NEW TEXT NODE
var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"];
demoA.appendChild[demoC];
}];
27Nhận tất cả các phần tử với tên thẻ đã cho. Nhấp vào đây
John Doe
window.addEventListener["load", [] => {
// [B] GET HTML ELEMENT
var demoA = document.getElementById["demo"];
// [C] CREATE ELEMENT + SET CONTENTS
var demoB = document.createElement["strong"];
demoB.innerHTML = " SAYS ";
demoA.appendChild[demoB];
// [D] CREATE NEW TEXT NODE
var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"];
demoA.appendChild[demoC];
}];
28Nhận tất cả các phần tử bằng bộ chọn CSS nhất định. Bấm vào đây
John Doe
window.addEventListener["load", [] => {
// [B] GET HTML ELEMENT
var demoA = document.getElementById["demo"];
// [C] CREATE ELEMENT + SET CONTENTS
var demoB = document.createElement["strong"];
demoB.innerHTML = " SAYS ";
demoA.appendChild[demoB];
// [D] CREATE NEW TEXT NODE
var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"];
demoA.appendChild[demoC];
}];
29Giống như trên, ngoại trừ việc nó có nhiều bộ chọn được phân tách bằng dấu phẩy. Bấm vào đây
ĐẶT THUỘC TÍNH HTML/CSS
4-bộ-thuộc tính. html
John Doe
window.addEventListener["load", [] => {
// [B] GET HTML ELEMENT
var demoA = document.getElementById["demo"];
// [C] CREATE ELEMENT + SET CONTENTS
var demoB = document.createElement["strong"];
demoB.innerHTML = " SAYS ";
demoA.appendChild[demoB];
// [D] CREATE NEW TEXT NODE
var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"];
demoA.appendChild[demoC];
}];
3Bạn có nhớ ví dụ “tạo và nối thêm phần tử HTML” không?
Method/PropertyDescriptionReference
John Doe
window.addEventListener["load", [] => {
// [B] GET HTML ELEMENT
var demoA = document.getElementById["demo"];
// [C] CREATE ELEMENT + SET CONTENTS
var demoB = document.createElement["strong"];
demoB.innerHTML = " SAYS ";
demoA.appendChild[demoB];
// [D] CREATE NEW TEXT NODE
var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"];
demoA.appendChild[demoC];
}];
30Tạo một nút văn bản mới. Bấm vào đây
John Doe
window.addEventListener["load", [] => {
// [B] GET HTML ELEMENT
var demoA = document.getElementById["demo"];
// [C] CREATE ELEMENT + SET CONTENTS
var demoB = document.createElement["strong"];
demoB.innerHTML = " SAYS ";
demoA.appendChild[demoB];
// [D] CREATE NEW TEXT NODE
var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"];
demoA.appendChild[demoC];
}];
31Tạo một phần tử HTML mới. Nhấp vào đây
John Doe
window.addEventListener["load", [] => {
// [B] GET HTML ELEMENT
var demoA = document.getElementById["demo"];
// [C] CREATE ELEMENT + SET CONTENTS
var demoB = document.createElement["strong"];
demoB.innerHTML = " SAYS ";
demoA.appendChild[demoB];
// [D] CREATE NEW TEXT NODE
var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"];
demoA.appendChild[demoC];
}];
32Nhận hoặc đặt id của một phần tử. Bấm vào đây
John Doe
window.addEventListener["load", [] => {
// [B] GET HTML ELEMENT
var demoA = document.getElementById["demo"];
// [C] CREATE ELEMENT + SET CONTENTS
var demoB = document.createElement["strong"];
demoB.innerHTML = " SAYS ";
demoA.appendChild[demoB];
// [D] CREATE NEW TEXT NODE
var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"];
demoA.appendChild[demoC];
}];
33Danh sách các lớp CSS mà phần tử có. Bấm vào đây ________ 234 Thêm một lớp CSS mới vào phần tử.
John Doe
window.addEventListener["load", [] => {
// [B] GET HTML ELEMENT
var demoA = document.getElementById["demo"];
// [C] CREATE ELEMENT + SET CONTENTS
var demoB = document.createElement["strong"];
demoB.innerHTML = " SAYS ";
demoA.appendChild[demoB];
// [D] CREATE NEW TEXT NODE
var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"];
demoA.appendChild[demoC];
}];
35Xóa một lớp CSS khỏi phần tử.
John Doe
window.addEventListener["load", [] => {
// [B] GET HTML ELEMENT
var demoA = document.getElementById["demo"];
// [C] CREATE ELEMENT + SET CONTENTS
var demoB = document.createElement["strong"];
demoB.innerHTML = " SAYS ";
demoA.appendChild[demoB];
// [D] CREATE NEW TEXT NODE
var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"];
demoA.appendChild[demoC];
}];
36Chuyển đổi lớp CSS trên phần tử.
John Doe
window.addEventListener["load", [] => {
// [B] GET HTML ELEMENT
var demoA = document.getElementById["demo"];
// [C] CREATE ELEMENT + SET CONTENTS
var demoB = document.createElement["strong"];
demoB.innerHTML = " SAYS ";
demoA.appendChild[demoB];
// [D] CREATE NEW TEXT NODE
var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"];
demoA.appendChild[demoC];
}];
37Nhận hoặc đặt một kiểu CSS cụ thể trên phần tử. Bấm vào đây
John Doe
window.addEventListener["load", [] => {
// [B] GET HTML ELEMENT
var demoA = document.getElementById["demo"];
// [C] CREATE ELEMENT + SET CONTENTS
var demoB = document.createElement["strong"];
demoB.innerHTML = " SAYS ";
demoA.appendChild[demoB];
// [D] CREATE NEW TEXT NODE
var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"];
demoA.appendChild[demoC];
}];
38Nối một phần tử con vào cuối phần tử. Bấm vào đây
HÃY LƯU Ý THÊM VỀ LỆNH TẢI
5-tải-lệnh. html
John Doe
window.addEventListener["load", [] => {
// [B] GET HTML ELEMENT
var demoA = document.getElementById["demo"];
// [C] CREATE ELEMENT + SET CONTENTS
var demoB = document.createElement["strong"];
demoB.innerHTML = " SAYS ";
demoA.appendChild[demoB];
// [D] CREATE NEW TEXT NODE
var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"];
demoA.appendChild[demoC];
}];
3Cuối cùng, đây là một cạm bẫy phổ biến đối với những người mới bắt đầu – Không lưu ý thứ tự tải các thứ. Lưu ý cách
John Doe
window.addEventListener["load", [] => {
// [B] GET HTML ELEMENT
var demoA = document.getElementById["demo"];
// [C] CREATE ELEMENT + SET CONTENTS
var demoB = document.createElement["strong"];
demoB.innerHTML = " SAYS ";
demoA.appendChild[demoB];
// [D] CREATE NEW TEXT NODE
var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"];
demoA.appendChild[demoC];
}];
39 là
John Doe
window.addEventListener["load", [] => {
// [B] GET HTML ELEMENT
var demoA = document.getElementById["demo"];
// [C] CREATE ELEMENT + SET CONTENTS
var demoB = document.createElement["strong"];
demoB.innerHTML = " SAYS ";
demoA.appendChild[demoB];
// [D] CREATE NEW TEXT NODE
var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"];
demoA.appendChild[demoC];
}];
30 trong ví dụ này? . ? . Điều đã xảy ra là các tệp HTML tải theo cách từ trên xuống dưới, từ trái sang phải
John Doe
window.addEventListener["load", [] => {
// [B] GET HTML ELEMENT
var demoA = document.getElementById["demo"];
// [C] CREATE ELEMENT + SET CONTENTS
var demoB = document.createElement["strong"];
demoB.innerHTML = " SAYS ";
demoA.appendChild[demoB];
// [D] CREATE NEW TEXT NODE
var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"];
demoA.appendChild[demoC];
}];
32 được tải trước và chạy trước khi
John Doe
window.addEventListener["load", [] => {
// [B] GET HTML ELEMENT
var demoA = document.getElementById["demo"];
// [C] CREATE ELEMENT + SET CONTENTS
var demoB = document.createElement["strong"];
demoB.innerHTML = " SAYS ";
demoA.appendChild[demoB];
// [D] CREATE NEW TEXT NODE
var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"];
demoA.appendChild[demoC];
}];
31 thậm chí được hiển thị - Đây là cách
John Doe
window.addEventListener["load", [] => {
// [B] GET HTML ELEMENT
var demoA = document.getElementById["demo"];
// [C] CREATE ELEMENT + SET CONTENTS
var demoB = document.createElement["strong"];
demoB.innerHTML = " SAYS ";
demoA.appendChild[demoB];
// [D] CREATE NEW TEXT NODE
var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"];
demoA.appendChild[demoC];
}];
34 kết thúc dưới dạng
John Doe
window.addEventListener["load", [] => {
// [B] GET HTML ELEMENT
var demoA = document.getElementById["demo"];
// [C] CREATE ELEMENT + SET CONTENTS
var demoB = document.createElement["strong"];
demoB.innerHTML = " SAYS ";
demoA.appendChild[demoB];
// [D] CREATE NEW TEXT NODE
var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"];
demoA.appendChild[demoC];
}];
30. Để giải quyết vấn đề này, chúng ta có thể sử dụng
John Doe
window.addEventListener["load", [] => {
// [B] GET HTML ELEMENT
var demoA = document.getElementById["demo"];
// [C] CREATE ELEMENT + SET CONTENTS
var demoB = document.createElement["strong"];
demoB.innerHTML = " SAYS ";
demoA.appendChild[demoB];
// [D] CREATE NEW TEXT NODE
var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"];
demoA.appendChild[demoC];
}];
36 [như trong ví dụ trước] để đợi cửa sổ được tải đầy đủ trước khi tiếp tục với tập lệnh
BIT & LIÊN KẾT HỮU ÍCH
Đó là tất cả cho hướng dẫn này và đây là một phần nhỏ về một số tính năng bổ sung và liên kết có thể hữu ích cho bạn
Thao tác HTML TRỰC TIẾP VS TẠO ĐỐI TƯỢNG
Giữa việc thay đổi trực tiếp bằng
John Doe
window.addEventListener["load", [] => {
// [B] GET HTML ELEMENT
var demoA = document.getElementById["demo"];
// [C] CREATE ELEMENT + SET CONTENTS
var demoB = document.createElement["strong"];
demoB.innerHTML = " SAYS ";
demoA.appendChild[demoB];
// [D] CREATE NEW TEXT NODE
var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"];
demoA.appendChild[demoC];
}];
0 và tạo các phần tử
John Doe
window.addEventListener["load", [] => {
// [B] GET HTML ELEMENT
var demoA = document.getElementById["demo"];
// [C] CREATE ELEMENT + SET CONTENTS
var demoB = document.createElement["strong"];
demoB.innerHTML = " SAYS ";
demoA.appendChild[demoB];
// [D] CREATE NEW TEXT NODE
var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"];
demoA.appendChild[demoC];
}];
38 – Cái nào tốt hơn? . Đó chỉ là vấn đề có ý nghĩa hơn trong nhiều tình huống khác nhau
0 hoạt động tốt hơn khi bạn xử lý việc thay đổi nội dung văn bản bên trong một phần tửJohn Doewindow.addEventListener["load", [] => { // [B] GET HTML ELEMENT var demoA = document.getElementById["demo"]; // [C] CREATE ELEMENT + SET CONTENTS var demoB = document.createElement["strong"]; demoB.innerHTML = " SAYS "; demoA.appendChild[demoB]; // [D] CREATE NEW TEXT NODE var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"]; demoA.appendChild[demoC]; }];
38 có ý nghĩa hơn khi bạn xử lý các danh sách và bảngJohn Doewindow.addEventListener["load", [] => { // [B] GET HTML ELEMENT var demoA = document.getElementById["demo"]; // [C] CREATE ELEMENT + SET CONTENTS var demoB = document.createElement["strong"]; demoB.innerHTML = " SAYS "; demoA.appendChild[demoB]; // [D] CREATE NEW TEXT NODE var demoC = document.createTextNode["uvuvwevwevwe onyetenyevwe ugwemubwem ossas"]; demoA.appendChild[demoC]; }];
Vì vậy, vâng - Tùy thuộc vào bạn để quyết định cái nào thoải mái hơn
ĐỀ NGHỊ ĐỌC
- Gỡ lỗi Javascript cho người mới bắt đầu – Code Boxx
VIDEO HƯỚNG DẪN
BẢNG CHEAT INFOGRAPHIC
Cảm ơn bạn đã đọc, và chúng tôi đã đi đến phần cuối của hướng dẫn này. Tôi hy vọng rằng nó đã giúp bạn với dự án của bạn và nếu bạn muốn chia sẻ bất cứ điều gì với hướng dẫn này, xin vui lòng bình luận bên dưới. Chúc may mắn và mã hóa hạnh phúc