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. Show Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.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 đó::
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 javascriptVí dụ: Giả sử mình có một đoạn mã HTML như sau.: 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:
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:
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. Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.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 đó::
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 javascriptVí dụ: Giả sử mình có một đoạn mã HTML như sau.: 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:
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:
|