Cách thêm mã HTML vào div bằng appendChild trong JavaScript
Hướng dẫn cách sử dụng `appendChild` để thêm mã HTML vào một phần tử `div` trong JavaScript. Cách tiếp cận này giúp đảm bảo tính toàn vẹn của DOM và dễ dàng thêm các phần tử HTML động.
Bài viết sẽ giới thiệu cách sử dụng phương thức appendChild trong JavaScript để thêm nội dung HTML mới vào một phần tử div. Cách này sử dụng DOM Node và giúp thao tác trên trang web trở nên chính xác hơn so với việc sử dụng innerHTML.
Mã JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Append HTML using appendChild</title>
</head>
<body>
<div id="myDiv">
<p>Initial content inside the div.</p>
</div>
<button onclick="appendHTML()">Add More HTML</button>
<script>
// Hàm dùng để thêm phần tử HTML vào div
function appendHTML() {
// Lấy phần tử div với id 'myDiv'
const myDiv = document.getElementById("myDiv");
// Tạo một phần tử p mới
const newParagraph = document.createElement("p");
// Tạo nội dung văn bản cho phần tử p
const text = document.createTextNode("New paragraph added using appendChild.");
// Thêm nội dung văn bản vào phần tử p
newParagraph.appendChild(text);
// Thêm phần tử p vào div
myDiv.appendChild(newParagraph);
}
</script>
</body>
</html>
Giải thích chi tiết từng dòng code:
-
<!DOCTYPE html>: Khai báo kiểu tài liệu HTML. -
<div id="myDiv">: Tạo phần tửdivchứa nội dung ban đầu. -
<button onclick="appendHTML()">: Nút bấm gọi hàmappendHTMLkhi người dùng nhấn. -
function appendHTML(): Định nghĩa hàm JavaScript để thêm phần tử HTML vàodiv. -
const myDiv = document.getElementById("myDiv");: Lấy phần tửdivbằngid. -
const newParagraph = document.createElement("p");: Tạo một phần tửpmới. -
const text = document.createTextNode("...");: Tạo nội dung văn bản cho phần tửp. -
newParagraph.appendChild(text);: Thêm nội dung văn bản vào phần tửp. -
myDiv.appendChild(newParagraph);: Thêm phần tửpvào trongdiv.
Lời khuyên:
-
appendChildgiúp duy trì cấu trúc DOM hiện có mà không thay thế nội dung nhưinnerHTML. - Bạn có thể kết hợp
createElementvàappendChildđể tạo ra các cấu trúc HTML phức tạp hơn.