Cách thêm mã HTML vào div bằng insertAdjacentHTML trong JavaScript

Hướng dẫn cách thêm mã HTML vào một phần tử `div` sử dụng phương thức `insertAdjacentHTML` trong JavaScript, giúp bạn thêm nội dung mà không thay thế toàn bộ nội dung hiện có.

Trong bài viết này, chúng ta sẽ học cách sử dụng phương thức insertAdjacentHTML trong JavaScript để thêm mã HTML vào một phần tử div tại các vị trí khác nhau mà không làm mất nội dung HTML hiện tại. Đây là một phương pháp hữu ích để thao tác DOM linh hoạt hơn so với việc 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 insertAdjacentHTML</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 nội dung HTML vào div
        function appendHTML() {
            // Lấy phần tử div với id 'myDiv'
            const myDiv = document.getElementById("myDiv");
            
            // Thêm nội dung HTML mới sau phần tử hiện tại
            myDiv.insertAdjacentHTML('beforeend', "<p>New paragraph added using insertAdjacentHTML.</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 HTML.
<div id="myDiv">: Tạo một phần tử div với nội dung ban đầu.
<button onclick="appendHTML()">: Nút bấm gọi hàm appendHTML khi được nhấn.
function appendHTML(): Định nghĩa hàm JavaScript dùng để thêm HTML vào div.
const myDiv = document.getElementById("myDiv");: Lấy phần tử div bằng id.
myDiv.insertAdjacentHTML('beforeend', "...");: Thêm nội dung HTML mới vào phần tử div mà không thay thế nội dung hiện tại. Sử dụng 'beforeend' để thêm nội dung vào cuối phần tử.

Lời khuyên:

insertAdjacentHTML là một phương pháp hữu ích khi bạn muốn thêm nội dung vào một vị trí cụ thể mà không thay thế nội dung hiện có như innerHTML.
Có các tùy chọn khác cho phương thức này, chẳng hạn như 'beforebegin', 'afterbegin', 'beforeend', và 'afterend', giúp bạn linh hoạt trong việc chèn nội dung HTML.

Tags: JavaScript, HTML, append

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

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.

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 đó.

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 truyền mảng làm tham số hàm trong JavaScript bằng phương thức call()

Hướng dẫn cách truyền một mảng làm tham số cho hàm trong JavaScript sử dụng phương thức `call()`. Bài viết sẽ giới thiệu cách sử dụng phương thức `call()` để thay đổi ngữ cảnh và truyền tham số từ mảng.

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.

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ể.

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.

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.

Chuyển đổi chữ cái Unicode có dấu thành không dấu trong JavaScript

Hướng dẫn cách sử dụng JavaScript để chuyển đổi các chữ cái Unicode có dấu thành các chữ cái không dấu. Bao gồm mã nguồn và giải thích chi tiết từng bước.