×

Thêm, Xóa, Thay Đổi Nội Dung Của Một Phần Tử Trong DOM

Avatar of luongtu
luongtu 1 Views

Trong JavaScript, có nhiều cách để thêm, xóa và thay đổi nội dung của một phần tử trong Document Object Model (DOM). Dưới đây là hướng dẫn chi tiết và ví dụ cụ thể cho từng thao tác.

1. Thêm Phần Tử Vào DOM

Sử Dụng appendChild

Phương thức appendChild thêm một phần tử con vào phần tử hiện tại.

<!DOCTYPE html>
<html>
<head>
  <title>Thêm Phần Tử Vào DOM</title>
</head>
<body>
  <div id="container"></div>
  <script>
    var container = document.getElementById("container");
    var newDiv = document.createElement("div");
    newDiv.textContent = "Đây là một phần tử mới";
    container.appendChild(newDiv);
  </script>
</body>
</html>

Sử Dụng insertBefore

Phương thức insertBefore thêm một phần tử mới vào trước một phần tử con cụ thể.

<!DOCTYPE html>
<html>
<head>
  <title>Thêm Phần Tử Vào DOM</title>
</head>
<body>
  <div id="container">
    <p id="first">Phần tử đầu tiên</p>
  </div>
  <script>
    var container = document.getElementById("container");
    var newDiv = document.createElement("div");
    newDiv.textContent = "Đây là một phần tử mới";
    var firstChild = document.getElementById("first");
    container.insertBefore(newDiv, firstChild);
  </script>
</body>
</html>

2. Xóa Phần Tử Khỏi DOM

Sử Dụng removeChild

Phương thức removeChild xóa một phần tử con từ phần tử hiện tại.

<!DOCTYPE html>
<html>
<head>
  <title>Xóa Phần Tử Khỏi DOM</title>
</head>
<body>
  <div id="container">
    <p id="removeMe">Phần tử sẽ bị xóa</p>
  </div>
  <script>
    var container = document.getElementById("container");
    var removeMe = document.getElementById("removeMe");
    container.removeChild(removeMe);
  </script>
</body>
</html>

Sử Dụng remove

Phương thức remove xóa trực tiếp phần tử khỏi DOM.

<!DOCTYPE html>
<html>
<head>
  <title>Xóa Phần Tử Khỏi DOM</title>
</head>
<body>
  <p id="removeMe">Phần tử sẽ bị xóa</p>
  <script>
    var removeMe = document.getElementById("removeMe");
    removeMe.remove();
  </script>
</body>
</html>

3. Thay Đổi Nội Dung Của Phần Tử

Sử Dụng innerHTML

Phương thức innerHTML thay đổi nội dung HTML của một phần tử.

<!DOCTYPE html>
<html>
<head>
  <title>Thay Đổi Nội Dung Của Phần Tử</title>
</head>
<body>
  <div id="content">Nội dung cũ</div>
  <script>
    var content = document.getElementById("content");
    content.innerHTML = "Nội dung mới";
  </script>
</body>
</html>

Sử Dụng textContent

Phương thức textContent thay đổi nội dung văn bản của một phần tử.

<!DOCTYPE html>
<html>
<head>
  <title>Thay Đổi Nội Dung Của Phần Tử</title>
</head>
<body>
  <div id="content">Nội dung cũ</div>
  <script>
    var content = document.getElementById("content");
    content.innerHTML = "Nội dung mới";
  </script>
</body>
</html>

Tổng Kết

Việc thêm, xóa và thay đổi nội dung của các phần tử trong DOM là những thao tác cơ bản và quan trọng trong lập trình JavaScript. Dưới đây là tóm tắt các phương pháp chính:

  1. Thêm Phần Tử:

    • Sử dụng appendChild để thêm một phần tử con vào phần tử hiện tại.
    • Sử dụng insertBefore để thêm một phần tử mới vào trước một phần tử con cụ thể.

  2. Xóa Phần Tử:

    • Sử dụng removeChild để xóa một phần tử con từ phần tử hiện tại.
    • Sử dụng remove để xóa trực tiếp phần tử khỏi DOM.

  3. Thay Đổi Nội Dung:

    • Sử dụng innerHTML để thay đổi nội dung HTML của một phần tử.
    • Sử dụng textContent để thay đổi nội dung văn bản của một phần tử.

Hiểu và áp dụng đúng các phương thức này sẽ giúp bạn quản lý và thao tác với các phần tử trong DOM một cách hiệu quả, tạo ra các trang web động và tương tác hơn.

Comments

Bài viết liên quan