Trong bài viết này, chúng ta tìm hiểu cách thêm động các phần tử HTML bằng JavaScript. Cần có hiểu biết cơ bản về HTML, CSS và javascript. Ở đây chúng ta sẽ sử dụng một nút và bằng cách nhấp vào nút này, chúng ta có thể thêm phần tử HTML một cách linh hoạt trong ví dụ này Cách tiếp cận. Tạo một tệp HTML với bất kỳ tên nào (Ex-index. html), sau đó viết mẫu HTML bên ngoài và lấy một nút để khi ai đó nhấp vào nút, HTML sẽ được thêm động từng cái một ở định dạng danh sách. Chúng ta đã đính kèm một trình lắng nghe sự kiện onclick vào nút, khi ai đó nhấp vào nút đó ngay lập tức sự kiện sẽ kích hoạt và thực thi chức năng gọi lại được gắn vào trình xử lý sự kiện đó bên trong hàm gọi lại, chúng ta cần đề cập đến một tác vụ nào đó mà chúng ta muốn xảy ra sau một onclick . Khi bạn chọn các thành phần để đánh dấu cho chú giải công cụ/đầu vào/điểm phát sóng, UserGuiding có thể định vị chính xác chúng thông qua tùy chọn Bộ chọn CSS tùy chỉnh Tuy nhiên, nếu các phần tử của bạn có các thuộc tính HTML động, nghĩa là ID, lớp, v.v. , sẽ thay đổi sau mỗi lần làm mới trang, bộ chọn CSS tùy chỉnh của chúng tôi sẽ không hoạt động bình thường.
Trong trường hợp này, bạn có thể thử tìm các tùy chọn thuộc tính HTML khác không thay đổi (đây có thể là trường hợp của href, aria-label, v.v. ). Tìm và sử dụng thuộc tính HTML không thể thay đổiTrong ví dụ này, chúng tôi sẽ đánh dấu một phần tử HTML từ ứng dụng Gmail bằng cách định vị một thuộc tính không động Sao chép và dán nó vào trường bộ chọn CSS Xóa dấu ngoặc kép Bọc thuộc tính bằng dấu ngoặc vuông Lưu và xuất bản các thay đổi
Bạn có thể thử tìm các thuộc tính HTML không thể thay đổi khác và sử dụng định dạng tương tự. [thuộc tính=giá trị] Quan trọng. Nếu tất cả các thuộc tính HTML của bạn là động, bạn có thể yêu cầu nhà phát triển gán một thuộc tính cho thành phần của mình để bạn có thể đánh dấu chúng một cách chính xác Chào mừng bạn đến với hướng dẫn về cách hiển thị nội dung HTML động trong Javascript. Vâng, thời kỳ đồ đá của Internet đã qua lâu và chúng ta hiện đang sống trong thời đại của các trang HTML không tĩnh. Có thể làm mới giỏ hàng sau khi thêm một mặt hàng, tải thêm nội dung hoặc cập nhật một phần của trang Có một số cách để thao tác động nội dung HTML bằng Javascript - Trực tiếp thay đổi nội dung với
<!-- (A) HTML -->
<div id="first">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<!-- (B) CREATE & INSERT ELEMENT -->
<script>
window.addEventListener("load", () => {
// (B1) CREATE NEW HTML ELEMENT
var element = document.createElement("strong");
element.innerHTML = "FOO BAR!";
// (B2) ATTACH TO <DIV>
document.getElementById("first").appendChild(element);
// (B3) TO ATTACH NEW ELEMENT TO <BODY>
element = document.createElement("p");
element.innerHTML = "Lorem ipsum dolor sit amet.";
document.body.appendChild(element);
});
</script>
5 và <!-- (A) HTML -->
<div id="first">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<!-- (B) CREATE & INSERT ELEMENT -->
<script>
window.addEventListener("load", () => {
// (B1) CREATE NEW HTML ELEMENT
var element = document.createElement("strong");
element.innerHTML = "FOO BAR!";
// (B2) ATTACH TO <DIV>
document.getElementById("first").appendChild(element);
// (B3) TO ATTACH NEW ELEMENT TO <BODY>
element = document.createElement("p");
element.innerHTML = "Lorem ipsum dolor sit amet.";
document.body.appendChild(element);
});
</script>
0 - Tạo các phần tử HTML mới và chèn chúng
- Tải và chèn nội dung HTML bằng AJAX
- Tải dữ liệu bằng AJAX và tạo bảng hoặc danh sách
- Tự động tải các tệp CSS
Nhưng làm thế nào để mỗi phương pháp hoạt động chính xác? ⓘ Tôi đã bao gồm một tệp zip chứa tất cả mã 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 & Ghi chú Nội dung động Bit và liên kết hữu ích Video hướng dẫn The End TẢI XUỐNG & LƯU ÝĐầu tiên, đây là liên kết tải xuống mã ví dụ như đã hứa GHI CHÚ NHANHNế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ỐNGNhấ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 NỘI DUNG ĐỘNG VỚI JAVASCRIPTĐược rồi, bây giờ chúng ta hãy đi vào các ví dụ về thao tác với nội dung HTML động trong Javascript 1) THAY ĐỔI NỘI DUNG BẰNG INNERHTML và OUTERHTML1-trong-ngoài-html <!-- (A) HTML PARAGRAPHS -->
<p id="first">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p id="second">
Vivamus semper eleifend lectus, sed faucibus massa cursus a.
</p>
<!-- (B) REPLACE HTML -->
<script>
window.addEventListener("load", () => {
// (B1) REPLACE THE ENTIRE <P> ELEMENT WITH <STRONG>
var first = document.getElementById("first");
first.outerHTML = "<strong>FOO BAR!</strong>";
// (B2) WILL STILL BE A <P>, BUT CONTENT WILL BE CHANGED.
var second = document.getElementById("second");
second.innerHTML = "<u>FOO</u> <i>BAR</i>";
});
</script>
Vậy thuộc tính <!-- (A) HTML -->
<div id="first">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<!-- (B) CREATE & INSERT ELEMENT -->
<script>
window.addEventListener("load", () => {
// (B1) CREATE NEW HTML ELEMENT
var element = document.createElement("strong");
element.innerHTML = "FOO BAR!";
// (B2) ATTACH TO <DIV>
document.getElementById("first").appendChild(element);
// (B3) TO ATTACH NEW ELEMENT TO <BODY>
element = document.createElement("p");
element.innerHTML = "Lorem ipsum dolor sit amet.";
document.body.appendChild(element);
});
</script>
5 và <!-- (A) HTML -->
<div id="first">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<!-- (B) CREATE & INSERT ELEMENT -->
<script>
window.addEventListener("load", () => {
// (B1) CREATE NEW HTML ELEMENT
var element = document.createElement("strong");
element.innerHTML = "FOO BAR!";
// (B2) ATTACH TO <DIV>
document.getElementById("first").appendChild(element);
// (B3) TO ATTACH NEW ELEMENT TO <BODY>
element = document.createElement("p");
element.innerHTML = "Lorem ipsum dolor sit amet.";
document.body.appendChild(element);
});
</script>
0 là gì? - ______25 đề cập đến nội dung của phần tử đã cho
- ______00 đề cập đến toàn bộ phần tử
2) TẠO THÀNH PHẦN HTML và CHÈN2-tạo. html <!-- (A) HTML -->
<div id="first">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<!-- (B) CREATE & INSERT ELEMENT -->
<script>
window.addEventListener("load", () => {
// (B1) CREATE NEW HTML ELEMENT
var element = document.createElement("strong");
element.innerHTML = "FOO BAR!";
// (B2) ATTACH TO <DIV>
document.getElementById("first").appendChild(element);
// (B3) TO ATTACH NEW ELEMENT TO <BODY>
element = document.createElement("p");
element.innerHTML = "Lorem ipsum dolor sit amet.";
document.body.appendChild(element);
});
</script>
Đây là một cách xử lý “hướng đối tượng” với các phần tử HTML - Tạo một phần tử mới –
<!-- (A) HTML -->
<div id="first">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<!-- (B) CREATE & INSERT ELEMENT -->
<script>
window.addEventListener("load", () => {
// (B1) CREATE NEW HTML ELEMENT
var element = document.createElement("strong");
element.innerHTML = "FOO BAR!";
// (B2) ATTACH TO <DIV>
document.getElementById("first").appendChild(element);
// (B3) TO ATTACH NEW ELEMENT TO <BODY>
element = document.createElement("p");
element.innerHTML = "Lorem ipsum dolor sit amet.";
document.body.appendChild(element);
});
</script>
5 - Đặt nội dung –
<!-- (A) HTML -->
<div id="first">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<!-- (B) CREATE & INSERT ELEMENT -->
<script>
window.addEventListener("load", () => {
// (B1) CREATE NEW HTML ELEMENT
var element = document.createElement("strong");
element.innerHTML = "FOO BAR!";
// (B2) ATTACH TO <DIV>
document.getElementById("first").appendChild(element);
// (B3) TO ATTACH NEW ELEMENT TO <BODY>
element = document.createElement("p");
element.innerHTML = "Lorem ipsum dolor sit amet.";
document.body.appendChild(element);
});
</script>
6 - Nối nó –
<!-- (A) HTML -->
<div id="first">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<!-- (B) CREATE & INSERT ELEMENT -->
<script>
window.addEventListener("load", () => {
// (B1) CREATE NEW HTML ELEMENT
var element = document.createElement("strong");
element.innerHTML = "FOO BAR!";
// (B2) ATTACH TO <DIV>
document.getElementById("first").appendChild(element);
// (B3) TO ATTACH NEW ELEMENT TO <BODY>
element = document.createElement("p");
element.innerHTML = "Lorem ipsum dolor sit amet.";
document.body.appendChild(element);
});
</script>
7
3) NỘI DUNG TẢI AJAX3A-AJAX. html ________số 8nội dung 3B. html <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
Dành cho các bạn chưa từng nghe đến AJAX, nó là chữ viết tắt của “Asynchronous Javascript And XML”. Theo thuật ngữ của giáo dân, tải nội dung và dữ liệu mà không cần làm mới toàn bộ trang. Rất hữu ích – Chúng tôi có thể sử dụng nó để gửi dữ liệu đến máy chủ, lấy dữ liệu từ máy chủ hoặc thậm chí tải thêm nội dung P. S. Hãy lưu ý rằng AJAX sẽ chỉ hoạt động với <!-- (A) HTML -->
<div id="first">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<!-- (B) CREATE & INSERT ELEMENT -->
<script>
window.addEventListener("load", () => {
// (B1) CREATE NEW HTML ELEMENT
var element = document.createElement("strong");
element.innerHTML = "FOO BAR!";
// (B2) ATTACH TO <DIV>
document.getElementById("first").appendChild(element);
// (B3) TO ATTACH NEW ELEMENT TO <BODY>
element = document.createElement("p");
element.innerHTML = "Lorem ipsum dolor sit amet.";
document.body.appendChild(element);
});
</script>
8, không phải với <!-- (A) HTML -->
<div id="first">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<!-- (B) CREATE & INSERT ELEMENT -->
<script>
window.addEventListener("load", () => {
// (B1) CREATE NEW HTML ELEMENT
var element = document.createElement("strong");
element.innerHTML = "FOO BAR!";
// (B2) ATTACH TO <DIV>
document.getElementById("first").appendChild(element);
// (B3) TO ATTACH NEW ELEMENT TO <BODY>
element = document.createElement("p");
element.innerHTML = "Lorem ipsum dolor sit amet.";
document.body.appendChild(element);
});
</script>
9 4) AJAX TẢI DỮ LIỆU VÀ TẠO BẢNG/DANH SÁCH4A-AJAX-JSON. html <!-- (A) HTML PARAGRAPHS -->
<p id="first">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p id="second">
Vivamus semper eleifend lectus, sed faucibus massa cursus a.
</p>
<!-- (B) REPLACE HTML -->
<script>
window.addEventListener("load", () => {
// (B1) REPLACE THE ENTIRE <P> ELEMENT WITH <STRONG>
var first = document.getElementById("first");
first.outerHTML = "<strong>FOO BAR!</strong>";
// (B2) WILL STILL BE A <P>, BUT CONTENT WILL BE CHANGED.
var second = document.getElementById("second");
second.innerHTML = "<u>FOO</u> <i>BAR</i>";
});
</script>
24B-hình nộm. json <!-- (A) HTML PARAGRAPHS -->
<p id="first">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p id="second">
Vivamus semper eleifend lectus, sed faucibus massa cursus a.
</p>
<!-- (B) REPLACE HTML -->
<script>
window.addEventListener("load", () => {
// (B1) REPLACE THE ENTIRE <P> ELEMENT WITH <STRONG>
var first = document.getElementById("first");
first.outerHTML = "<strong>FOO BAR!</strong>";
// (B2) WILL STILL BE A <P>, BUT CONTENT WILL BE CHANGED.
var second = document.getElementById("second");
second.innerHTML = "<u>FOO</u> <i>BAR</i>";
});
</script>
3Đây là phần tiếp theo của ví dụ AJAX trước đó – Có, chúng ta có thể phân tích một mảng dữ liệu JSON từ máy chủ và tạo một bảng hoặc danh sách với nó. Tôi sẽ không xử lý phía máy chủ vì nó nằm ngoài phạm vi của hướng dẫn này – Hãy đọc hướng dẫn khác của tôi về PHP JSON nếu bạn quan tâm 5) TẢI TỆP CSS ĐỘNG5A-tải-css. html <!-- (A) HTML PARAGRAPHS -->
<p id="first">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p id="second">
Vivamus semper eleifend lectus, sed faucibus massa cursus a.
</p>
<!-- (B) REPLACE HTML -->
<script>
window.addEventListener("load", () => {
// (B1) REPLACE THE ENTIRE <P> ELEMENT WITH <STRONG>
var first = document.getElementById("first");
first.outerHTML = "<strong>FOO BAR!</strong>";
// (B2) WILL STILL BE A <P>, BUT CONTENT WILL BE CHANGED.
var second = document.getElementById("second");
second.innerHTML = "<u>FOO</u> <i>BAR</i>";
});
</script>
4kiểu 5B. css <!-- (A) HTML PARAGRAPHS -->
<p id="first">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p id="second">
Vivamus semper eleifend lectus, sed faucibus massa cursus a.
</p>
<!-- (B) REPLACE HTML -->
<script>
window.addEventListener("load", () => {
// (B1) REPLACE THE ENTIRE <P> ELEMENT WITH <STRONG>
var first = document.getElementById("first");
first.outerHTML = "<strong>FOO BAR!</strong>";
// (B2) WILL STILL BE A <P>, BUT CONTENT WILL BE CHANGED.
var second = document.getElementById("second");
second.innerHTML = "<u>FOO</u> <i>BAR</i>";
});
</script>
5Hãy nhớ rằng chúng ta có thể tạo các thẻ HTML từ trước đó? BIT & LIÊN KẾT HỮU ÍCHĐó là tất cả các ví dụ và đây là một số tính năng bổ sung nhỏ có thể hữu ích TỔNG KẾTCHỨC NĂNG VÀ TÍNH CHẤTChức năng/thuộc tính Mô tả Liên kết tham khảo<!-- (A) HTML CONTAINER -->
<div id="container"></div>
<input type="button" value="AJAX Load" onclick="aload();"/>
<!-- (B) AJAX LOAD -->
<script>
function aload () {
fetch("3B-contents.html")
.then(res=>res.text())
.then((txt) => {
document.getElementById("container").innerHTML = txt;
})
}
</script>
2Nhận/đặt InternalHTML của phần tử. Nhấp vào đây<!-- (A) HTML CONTAINER -->
<div id="container"></div>
<input type="button" value="AJAX Load" onclick="aload();"/>
<!-- (B) AJAX LOAD -->
<script>
function aload () {
fetch("3B-contents.html")
.then(res=>res.text())
.then((txt) => {
document.getElementById("container").innerHTML = txt;
})
}
</script>
3Nhận/đặt HTML của toàn bộ phần tử. Bấm vào đây<!-- (A) HTML CONTAINER -->
<div id="container"></div>
<input type="button" value="AJAX Load" onclick="aload();"/>
<!-- (B) AJAX LOAD -->
<script>
function aload () {
fetch("3B-contents.html")
.then(res=>res.text())
.then((txt) => {
document.getElementById("container").innerHTML = txt;
})
}
</script>
4Tạo một phần tử HTML mới. Bấm vào đây<!-- (A) HTML CONTAINER -->
<div id="container"></div>
<input type="button" value="AJAX Load" onclick="aload();"/>
<!-- (B) AJAX LOAD -->
<script>
function aload () {
fetch("3B-contents.html")
.then(res=>res.text())
.then((txt) => {
document.getElementById("container").innerHTML = txt;
})
}
</script>
5Thêm một phần tử mới vào vùng chứa. Bấm vào đâyTÌM KIẾM AJAX<!-- (A) HTML -->
<div id="first">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<!-- (B) CREATE & INSERT ELEMENT -->
<script>
window.addEventListener("load", () => {
// (B1) CREATE NEW HTML ELEMENT
var element = document.createElement("strong");
element.innerHTML = "FOO BAR!";
// (B2) ATTACH TO <DIV>
document.getElementById("first").appendChild(element);
// (B3) TO ATTACH NEW ELEMENT TO <BODY>
element = document.createElement("p");
element.innerHTML = "Lorem ipsum dolor sit amet.";
document.body.appendChild(element);
});
</script>
2P. S. Nếu bạn cần tìm nạp từ một trang web khác (tên miền chéo) – Có thể, nhưng cần phải thực hiện một số cài đặt Chia sẻ tài nguyên nguồn gốc chéo (CORS). Hãy xem hướng dẫn tìm nạp CORS khác của tôi JSONFunctionDescription<!-- (A) HTML CONTAINER -->
<div id="container"></div>
<input type="button" value="AJAX Load" onclick="aload();"/>
<!-- (B) AJAX LOAD -->
<script>
function aload () {
fetch("3B-contents.html")
.then(res=>res.text())
.then((txt) => {
document.getElementById("container").innerHTML = txt;
})
}
</script>
6Giải mã chuỗi JSON đã cung cấp thành mảng/đối tượng. <!-- (A) HTML CONTAINER -->
<div id="container"></div>
<input type="button" value="AJAX Load" onclick="aload();"/>
<!-- (B) AJAX LOAD -->
<script>
function aload () {
fetch("3B-contents.html")
.then(res=>res.text())
.then((txt) => {
document.getElementById("container").innerHTML = txt;
})
}
</script>
7Mã hóa mảng/đối tượng đã cho thành chuỗi JSON VIDEO HƯỚNG DẪN BẢNG CHEAT INFOGRAPHICCả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 tạo một trang HTML động tốt hơn và nếu bạn có bất cứ điều gì muốn chia sẻ với hướng dẫn này, vui lòng bình luận bên dưới. Chúc may mắn và mã hóa hạnh phúc
Chúng tôi có thể tự động sửa đổi giá trị thuộc tính của thẻ HTML không?
Đúng
Thẻ động trong HTML là gì?
HTML động là tập hợp các công nghệ cho phép thay đổi động đối với tài liệu HTML . • Có thể sử dụng tập lệnh nhúng để thay đổi thuộc tính thẻ, nội dung hoặc thuộc tính kiểu phần tử. • Những thay đổi này không được hỗ trợ thống nhất trên toàn bộ trình duyệt.
Các phần tử HTML có thể được tạo động bằng JavaScript không?
phương thức createElement() bạn có thể tự động tạo một phần tử HTML được chỉ định trong JavaScript . Sau khi được tạo, bạn có thể chèn (hoặc thêm) phần tử vào trang web của mình hoặc thêm phần tử đó vào phần tử được xác định trước hoặc phần tử được tạo động. Trên thực tế, bạn có thể tự động tạo toàn bộ biểu mẫu bằng phương pháp này.
HTML động với ví dụ là gì?
Sự khác biệt giữa HTML và DHTML | 
