DOM HTML - Làm thế nào thay đổi nội dung 1 thẻ html?

JavaScript - JQuery    2020-09-02

Bước 1. khai báo biến để nhận phần tử html

 

var objH1_01 = document.getElementById("id1"); // lấy theo ID


Bước 2. Ghi log ra để xem kết quả

 

console.log(objH1_01); //lệnh này xem nội dung thẻ ở dạng html


Bước 3. Nếu cần lấy nội dung thẻ h1 ra để làm việc khác thì bạn dùng 1 trong 2 cú pháp sau:

 

var noi_dung = objH1_01.innerText; // dùng lệnh này sẽ lấy nội dung text và tự xóa bỏ thẻ html con trong chuỗi

var noi_dung = objH1_01.innerHTML; // nếu dùng lệnh này sẽ lấy nguyên bản nội dung html trong thẻ này.


Bước 4. Nếu muốn thay đổi nội dung của thẻ html thì bạn dùng lệnh gán thôi. Bạn có thể chọn 1 trong 2 cách sau:

 

objH1_01.innerText = "<i>Nội dung đã thay đổi </i>"; // dùng lệnh này thì thẻ I sẽ không có tác dụng

objH1_01.innerHTML = "<i>Nội dung đã thay đổi </i>"; // dùng lệnh này thẻ I mới có tác dụng hiển thị.


Xem code hoàn chỉnh:

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>https://saophaixoan.net</title>
</head>

<body>
    <h1 id="id1">Thực hành lấy 1 phần tử trong cây DOM để tương tác</h1>

    <script>
        //1. khai báo biến để nhận phần tử html
        var objH1_01 = document.getElementById("id1"); // lấy theo ID
        //2. Ghi log ra để xem kết quả
        console.log(objH1_01); //lệnh này xem nội dung thẻ ở dạng html

        //3. Nếu cần lấy nội dung thẻ h1 ra để làm việc khác thì bạn dùng cú pháp sau:
        var noi_dung = objH1_01.innerText; // dùng lệnh này sẽ lấy nội dung text và tự xóa bỏ thẻ html con trong chuỗi
        // var noi_dung = objH1_01.innerHTML;  // nếu dùng lệnh này sẽ lấy nguyên bản nội dung html trong thẻ này.

        //4. Nếu muốn thay đổi nội dung của thẻ html thì bạn dùng lệnh gán thôi
        objH1_01.innerText = "<i>Nội dung đã thay đổi </i>"; // dùng lệnh này thì thẻ I sẽ không có tác dụng
        // objH1_01.innerHTML = "<i>Nội dung đã thay đổi </i>"; // dùng lệnh này thẻ I mới có tác dụng hiển thị.

        // Bạn đã thấy sự khác nhau giữa innerText và innerHTML rồi chứ?
    </script>

</body>

</html>


Bạn đã thấy sự khác nhau giữa innerText và innerHTML rồi chứ?