Thêm / Xóa phần tử thông qua JS DOM

Trong hướng dẫn tự học JavaScript này, bạn sẽ tìm hiểu cách thao tác thêm / Xóa các phần tử trong JavaScript. (Hay còn gọi là thao tác với DOM)

Cách thêm / Xóa phần tử thông qua JS DOM

Thao tác các phần tử DOM trong JavaScript

Bây giờ, qua 4 bài học trước bạn đã học cách chọn và định kiểu các thành phần HTML DOM, cách chọn đến phần tử DOM cũng như cách get / set thuộc tính cho nó.

Trong chương này, chúng ta sẽ tìm hiểu cách thêm hoặc loại bỏ các phần tử DOM một cách linh hoạt hoặc lấy nội dung của chúng.

Bởi vì khi lập trình web thực tế chúng ta sẽ thường xuyên cần tạo ra các bố cục động, khi thì thêm khối này, khi thì loại bỏ khối nọ.

> Nếu bạn muốn trở thành một lập trình viên phát triển website "XỊN SÒ" thì xem ngay KHÓA HỌC LẬP TRÌNH (Full Stack)

Hãy tiếp tục đọc bên dưới đây để biết cách làm thế nào nhé.

Thêm phần tử mới vào trong DOM

Bạn có thể tạo phần tử mới trong tài liệu HTML một cách dễ dàng thông qua phương thức document.createEuity().

Phương thức này tạo ra một phần tử mới, nhưng nó không thêm ngay nó vào DOM.

Bạn sẽ phải tự thêm nó vào DOM bằng một bước riêng biệt, như trong ví dụ sau:

HTML:

<div id="main">
    <h1 id="tieuDe">Xin chào</h1>
    <p id="test">Đây là ví dụ thao tác với DOM.</p>
</div>

JavaScript:

<script>
    // Chúng ta tạo một phần tử mới (Tạo một thẻ div mới)
    var divMoi = document.createElement("div");
 
    // Tạo một đoạn text node mới
    var noiDungMoi = document.createTextNode("Xin chào, tôi mới được thêm vào nè!");
 
    // Thêm đoạn text vào div vừa được tạo
    divMoi.appendChild(noiDungMoi);
 
    // Thêm một phần tử mới với nội dung của nó vào trong DOM 
    var divHienTai = document.getElementById("main"); 
    document.body.appendChild(divMoi, divHienTai);
</script>

Phương thức appendChild() thêm phần tử mới vào cuối của bất kỳ phần tử con nào khác của nút cha được chỉ định.

Tuy nhiên, nếu bạn muốn thêm phần tử mới vào đầu của bất kỳ phần tử nào khác, bạn có thể sử dụng phương thức insertBefore(), như trong ví dụ dưới đây:

JavaScript:

<script>
    // Chúng ta tạo một phần tử mới (Tạo một thẻ div mới)
    var divMoi = document.createElement("div");
 
    // Tạo một đoạn text node mới
    var noiDungMoi = document.createTextNode("Xin chào, tôi mới được thêm vào nè!");
 
    // Thêm đoạn text vào div vừa được tạo
    divMoi.appendChild(noiDungMoi);
 
    // Thêm một phần tử mới với nội dung của nó vào trong DOM 
    var divHienTai = document.getElementById("main"); 
    document.body.insertBefore(divMoi, divHienTai);
</script>

Get và Set nội dung HTML trong DOM

Bạn cũng có thể dễ dàng lấy (get) hoặc thiết lập (set) nội dung của các thành phần HTML với thuộc tính innerHTML.

Thuộc tính này set hoặc get nội dung bên trong thẻ HTML (Bên trong thẻ mở và thẻ đóng của nó)

Hãy xem ví dụ sau để xem nó hoạt động như thế nào:

HTML:

<div id="main">
    <h1 id="tieuDe">Xin chào!</h1>
    <p id="test">Đây là ví dụ thao tác với DOM.</p>
</div>

JavaScript:

<script>
    // Lấy nội dung bên trong HTML
    var noiDung = document.getElementById("main").innerHTML;
    alert(noiDung);
 
    // Thiết lập nội dung bên trong thẻ HTML
    var divMain = document.getElementById("main");
    divMain.innerHTML = "<p>Thêm ND thành công đây nè!</p>";
</script>

Như bạn có thể thấy, bạn có thể dễ dàng chèn các phần tử mới vào DOM bằng cách sử dụng thuộc tính innerHTML.

Nhưng có một vấn đề... thuộc tính innerHTML thay thế tất cả nội dung hiện có của một phần tử.

Vì vậy, nếu bạn muốn chèn HTML vào tài liệu mà không thay thế nội dung hiện có của một phần tử, bạn có thể sử dụng phương thức insertAdjacentHTML().

Phương pháp này chấp nhận hai tham số:

    + Tham số đầu tiên: Vị trí cần chèn (nó phải là "beforebegin", "afterbegin", "beforeend" hoặc "afterend" )

    + Tham số thứ hai: Văn bản HTML cần chèn.

Ví dụ sau đây sẽ minh họa cách phương thức trên hoạt động như thế nào:

HTML (Chú ý những chỗ chú thích, đó là vị trí cần chèn):

<!-- beforebegin -->
<div id="main">
    <!-- afterbegin -->
    <h1 id="tieuDe">Xin chào bro!</h1>
    <!-- beforeend -->
</div>
<!-- afterend -->

JavaScript:

<script>
    // Nhắm đến thẻ div main
    var divMain = document.getElementById("main");
 
    // Chèn HTML ngay trước thẻ mở div main
    divMain.insertAdjacentHTML('beforebegin', '<p>Đoạn text chèn vào ngay trước thẻ mở của div main.</p>');
 
    // Chèn HTML ngay sau thẻ mở của div main
    divMain.insertAdjacentHTML('afterbegin', '<p>Đoạn text chèn ngay sau thẻ mở của div main.</p>');
 
    // Chèn HTML ngay trước thẻ đóng của div main
    divMain.insertAdjacentHTML('beforeend', '<p>Đoạn text chèn ngay trước thẻ đóng của div main.</p>');
 
    // Chèn HTML ngay sau thẻ đóng của div main
    divMain.insertAdjacentHTML('afterend', '<p>Đoạn text chèn ngay sau thẻ đóng của div main.</p>');
</script>

Lưu ý: Vị trí beforebegin và afterend chỉ hoạt động nếu node nằm trong cây DOM và có phần tử cha. Ngoài ra, khi chèn HTML vào một trang, hãy cẩn thận không sử dụng đầu vào của người dùng chưa được kiểm tra, để tránh các cuộc tấn công XSS.

Loại bỏ các phần tử hiện có khỏi DOM

Tương tự, bạn có thể sử dụng phương thức removeChild() để xóa một node con khỏi DOM.

Phương thức này cũng trả về node bị loại bỏ. Đây là một ví dụ:

HTML:

<div id="main">
    <h1 id="tieuDe">Xin chào!</h1>
    <p id="test">Ví dụ loại bỏ phần tử khỏi DOM.</p>
</div>

JavaScript:

<script>
    var phanTuCha = document.getElementById("main");
    var phanTuCon = document.getElementById("test");
    phanTuCha.removeChild(phanTuCon);
</script>

Bạn cũng có thể loại bỏ phần tử con mà không biết chính xác phần tử cha.

Chỉ cần tìm phần tử con và sử dụng thuộc tính parentNode để tìm phần tử cha của nó.

Thuộc tính này trả về cha của node được chỉ định trong cây DOM. Đây là một ví dụ:

HTML:

<div id="main">
    <h1 id="tieuDe">Xin chào!</h1>
    <p id="test">Ví dụ loại bỏ phần tử khỏi DOM.</p>
</div>

JavaScript:

<script>
    var phanTuCon = document.getElementById("test");
    phanTuCon.parentNode.removeChild(phanTuCon);
</script>

Thay thế các phần tử hiện có trong DOM

Bạn cũng có thể thay thế một phần tử trong HTML DOM bằng một phần tử khác bằng phương thức replaceChild().

Phương thức này chấp nhận hai tham số:

    + Node cần chèn

    + Node bị thay thế

Nó có cú pháp như sau:

phanTuCha.replaceChild(phanTuMoi, phanTuCu);

Hãy thử với ví dụ sau:

HTML:

<div id="main">
    <h1 id="tieuDe">Xin chào!</h1>
    <p id="test">Ví dụ loại bỏ phần tử khỏi DOM.</p>
</div>

JavaScript:

<script>
    var phanTuCha = document.getElementById("tieuDe");
    var phanTuCu = document.getElementById("test");
 
    // Tạo phần tử mới
    var phanTuMoi = document.createElement("p");
    var noiDungMoi = document.createTextNode("Đây là nội dung mới");
    phanTuMoi.appendChild(noiDungMoi);
 
    // Thay thế phần tử cũ bằng phần tử mới
    phanTuCha.replaceChild(phanTuMoi, phanTuCu);
</script>

Như vậy là hôm nay, mình đã hướng dẫn bạn học cách thêm vào xóa phần tử khỏi DOM bằng JavaScript.

Cũng đơn giản thôi phải không nào?

Hãy làm lại các ví dụ ít nhất 3 lần để đảm bảo bạn hiểu và nhớ chúng nhé. Chúc bạn học tốt.

Đọc thêm: Get / Set thuộc tính bằng JS DOM