Thêm mã HTML vào div bằng innerHTML trong JavaScript

Bài viết này hướng dẫn cách thêm mã HTML vào một phần tử `div` bằng thuộc tính `innerHTML` trong JavaScript. Người đọc sẽ học cách thao tác với DOM để thêm nội dung HTML mới vào một phần tử `div` cụ thể.

Trong bài viết này, bạn sẽ học cách sử dụng thuộc tính innerHTML để thêm mã HTML vào một phần tử div. Đây là một cách đơn giản để cập nhật hoặc thêm nội dung HTML động vào trang web của bạn.

Mã JavaScript:

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Thêm HTML bằng innerHTML</title>
</head>
<body>

    <div id="contentDiv">
        <p>Nội dung ban đầu trong div.</p>
    </div>

    <button onclick="appendContent()">Thêm HTML</button>

    <script>
        // Hàm để thêm mã HTML vào div
        function appendContent() {
            // Lấy phần tử div với id 'contentDiv'
            var contentDiv = document.getElementById("contentDiv");

            // Thêm đoạn HTML mới vào nội dung của div
            contentDiv.innerHTML += "<p>Đoạn mã HTML mới được thêm vào.</p>";
        }
    </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 là HTML5.
<div id="contentDiv">: Tạo một phần tử div để chứa nội dung HTML.
<button onclick="appendContent()">: Nút bấm sẽ gọi hàm appendContent khi được nhấn.
function appendContent(): Định nghĩa hàm JavaScript để thêm nội dung HTML vào div.
var contentDiv = document.getElementById("contentDiv");: Lấy phần tử div bằng id.
contentDiv.innerHTML += "...";: Nối thêm mã HTML mới vào phần tử div.

Lời khuyên:

Hãy đảm bảo rằng nội dung HTML được thêm không chứa mã độc để tránh các cuộc tấn công XSS.
innerHTML có thể thay thế toàn bộ nội dung của một phần tử, nên cẩn thận khi sử dụng để tránh mất dữ liệu hiện tại trong phần tử đó.

Tags: JavaScript, HTML, append

Các Hướng Dẫn Cùng Chủ Đề Đang Xem

Chương trình JavaScript truyền tham số vào phương thức setTimeout() sử dụng Anonymous Function

Hướng dẫn cách sử dụng phương thức `setTimeout()` để truyền tham số trong JavaScript bằng cách sử dụng hàm ẩn danh. Cách tiếp cận này giúp lập trình viên trì hoãn việc thực thi mã với các tham số được truyền vào hàm.

Truyền tham số vào phương thức setTimeout() trong JavaScript bằng phương thức bind()

Hướng dẫn cách truyền tham số vào phương thức `setTimeout()` bằng cách sử dụng phương thức `bind()` trong JavaScript. Phương pháp này cho phép chúng ta kiểm soát tham số được truyền vào hàm được gọi sau khoảng thời gian trì hoãn.

Lấy nội dung JSON từ API URL bằng JavaScript

Cách lấy nội dung JSON từ API URL bằng JavaScript. Bao gồm mã nguồn chi tiết và giải thích từng dòng để giúp bạn hiểu cách sử dụng Fetch API để thực hiện yêu cầu GET và xử lý dữ liệu JSON.

Gửi dữ liệu JSON bằng phương thức POST đến API trong JavaScript

Hướng dẫn cách gửi dữ liệu JSON đến một API bằng phương thức POST trong JavaScript. Đoạn mã sử dụng phương thức fetch để thực hiện yêu cầu POST và bao gồm giải thích chi tiết từng bước.

Cách truyền mảng làm tham số hàm trong JavaScript bằng cú pháp spread

Hướng dẫn cách sử dụng cú pháp spread (`...`) để truyền mảng vào một hàm trong JavaScript. Bài viết sẽ chỉ ra cách truyền từng phần tử của mảng như là các tham số riêng lẻ của hàm.

Cách chuyển đổi tên màu thành mã Hex trong JavaScript

Hướng dẫn cách chuyển đổi tên màu (ví dụ: "red", "blue") thành mã màu Hex (#RRGGBB) bằng cách sử dụng JavaScript. Phương pháp này giúp dễ dàng thao tác với màu sắc trong lập trình web.

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.

Cách chuyển đổi mã màu 3 chữ số thành mã màu 6 chữ số bằng JavaScript

Hướng dẫn cách chuyển đổi mã màu 3 chữ số (#RGB) thành mã màu 6 chữ số (#RRGGBB) bằng JavaScript. Cách này giúp đảm bảo màu hiển thị nhất quán trên các trang web.

Cách truyền tham số vào phương thức setTimeout() trong JavaScript bằng Arrow Function

Hướng dẫn cách sử dụng `setTimeout()` trong JavaScript với Arrow Function để truyền tham số vào hàm. Phương thức này hữu ích khi bạn cần trì hoãn việc thực thi hàm và muốn truyền tham số vào đó.

Gửi dữ liệu từ form HTML đến API URL bằng JavaScript (POST Request)

Cách gửi dữ liệu từ form HTML đến API URL bằng JavaScript với phương thức POST. Bao gồm mã nguồn chi tiết và giải thích từng dòng về cách sử dụng Fetch API để xử lý dữ liệu form và gửi yêu cầu POST.