Cách dùng insertBefore trong javascript

Trong bài này chúng ta sẽ tìm hiểu hàm insertBefore trong javascript, đây là hàm dùng để chèn một node html vào đằng trước một node khác.

test php

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Ở bài trước mình có hướng dẫn cách tạo hàm insertAfter, bài đó mình có nhắc đến hàm insertBefore. Vì vậy, hôm nay mình sẽ giải thích thật chi tiết về cách hoạt động của insertBefore để các bạn hiểu rõ hơn.

1. insertBefore trong javascript là gì?

insertBefore là một phương thức được tích hợp sẵn trong các node object của javascript. Nó giúp ta chèn một node vào đằng trước một node khác.

Nếu bạn đã chèn một node vào vị trí nào đó, và bạn tiếp tục chèn nó vào một vị trí khác nữa thì tại ví trí cũ sẽ bị xóa, sau đó chèn vào vị trí mới. Nói cách khác, node object trong javascript hoạt động theo kiểu tham chiếu nên nó là duy nhất.

Bài viết này được đăng tại [free tuts .net]

Cú pháp như sau:

let insertedNode = parentNode.insertBefore(newNode, referenceNode)

Trong đó:

insertNode là node chèn, đây là giá trị trả về của hàm insertBefore.
parentNode là node cha của node mới được chèn.
newNode là node dùng để chèn.
referenceNode là node được chèn. Nếu đây là node null thì newNode sẽ được chèn vào vị trí cuối cùng các node con của parentNode.

Tóm lại, referenceNode là một tùy chọn, nghĩa là bạn có thể truyền hoặc không. Còn các tham số còn lại là bắt buộc.

2. Cách dùng insertBefore javascript

Ví dụ: Giả sử mình có một đoạn mã HTML như sau.

<div id="parentElement">
   <span id="childElement">foo bar</span>
</div>

Bây giờ mình muốn chèn thêm một thẻ span vào đằng trước thẻ span ở trên thì các bước thực hiện như sau:

Đầu tiên cần xác đinh parentNode, đó chính là thẻ <div id="parentElement">.
Tiếp theo cần xác định referenceNode, đó chính là thẻ <span id="childElement">.
Cuối cùng cần xác định newNode, đó chính là một thẻ span mới.

Cụ thể sẽ như sau:

// Xác định newNode
let newNode = document.createElement('span');
newNode.textContent = "Bla freetuts.net";

// Xác định referenceNode
let referenceNode = document.getElementById('referenceNode');

// Xác định parentNode
let parentNode = document.getElementById('parentElement');
// Hoặc let parentNode = referenceNode.parentNode;

// Thực hiện chèn
let insertedNode = parentNode.insertBefore(newNode, referenceNode);

Như vậy là mình đã hướng dẫn xong cách sử dụng insertBefore trong Javascript. Qua đó bạn cần chú ý một số vấn đề như sau:

Cần phải xác định node cha - đó chính là node chứa tất cả các node con (node chèn lẫn node được chèn).
Nếu referenceNode là null hoặc không tồn tại thì newNode sẽ được chèn vào vị trí cuối cùng trong các node con của node cha.

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và proto trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Hướng dẫn cách tạo một số ngẫu nhiên ...

Cách dùng insertBefore trong javascript

1. insertBefore trong javascript là gì?

2. Cách dùng insertBefore javascript

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và proto trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Cách dùng insertBefore trong javascript

1. insertBefore trong javascript là gì?

2. Cách dùng insertBefore javascript

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và __proto__ trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Giới thiệu

Thủ thuật

Link hay

Liên kết

Phân biệt prototype và proto trong JavaScript