Liên hệ
javascript

Tạo mới, thêm xóa phần tử Dom - JavaScript

Tạo ra một nút phần tử HTML trong DOM, chèn phần tử HTML, xóa phần tử và thay thế phần tử trong DOM HTML

Tạo phần tử

Bạn có thể dùng JavaScript để tạo mới phần từ HTML sau đó chèn vào trang web. Đây là các cách giúp bạn tạo mới một phần tử HTML

  • element.cloneNode() tạo ra một phần tử bằng cách nhân bản phần tử chỉ ra (element)
  • document.createElement(tag_name) tạo ra phần tử tag_name
  • document.createTextNode(text) tạo phần tử tử văn bản text HTML
 var node = document.createTextNode("Tạo ra một phần tử");

Ví dụ trên sẽ tạo ra một nút text, nhưng nó chưa hiện thị cho đến khi bạn gắn phần tử đó vào HTML document, có một số cách để gắn phần tử tạo ra từ JavaScript vào DOM HTML

  • element.appendChild(newNode) thêm phần tử newNode vào phần tử element nó trở thành phần tử con sau cùng của element
  • element.insertBefore(node1, node2) chèn phần tử node1 nằm phía trước node2

Ví dụ sau tạo ra một phần tử đoạn văn p sau đó chèn nó vào phần tử div đang có sẵn trong DOM HTML

<div id ="demo">nội dung ví dụ</div>

<script>
  //tạo ra phần tử p mới
  var p = document.createElement("p");
  
  //Tạo ra một đoạn text
  var node = document.createTextNode("Some new text");
  
  //Thêm text vào văn bản
  p.appendChild(node);

  var div = document.getElementById("demo");
  //chèn phần tử p vào phần tử div
  div.appendChild(p);
</script>

Loại bỏ phần tử

Để loại bỏ phần tử HTML, bạn chọn phần tử cha rồi sử dụng phương thức removeChild(node)

<div id="demo">
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>

<script>
    var parent = document.getElementById("demo");
    var child = document.getElementById("p1");
    parent.removeChild(child);
</script>

Ví dụ trên sẽ xóa bỏ phần tử đoạn văn thứ nhất

Bạn có thể sử dụng thủ thuật lấy thuộc tính parentNode để bỏ qua bước tìm phần tử cha trong DOM: child.parentNode.removeChild(child);

<div id="demo">
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>

<script>
    var child = document.getElementById("p1");
    child.parentNode.removeChild(child);
</script>

Thay thế phần tử

Để thay thể một phần tử bằng một phần tử khác dùng cú pháp element.replaceChild(newNode, oldNode). Trong đó element là nút cha

<div id="demo">
    <p id="p1">This is a paragraph.</p>
    <p id="p2">This is another paragraph.</p>
</div>

<script>
    var p = document.createElement("p");
    p.innerText = 'Đây là đoạn văn mới tạo ra';

    var parent = document.getElementById("demo");
    var child = document.getElementById("p1");
    parent.replaceChild(p, child);
</script>

Vui lòng đăng ký ủng hộ kênh