Cách dùng insertAfter trong Javascript

Trong bài này mình sẽ giới thiệu hàm insertAfter trong javascript, đây là hàm giúp chèn thêm các thẻ html vào sau một thẻ html nào đó.

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.

Thật đáng tiếc là hiện tại javascript chưa hỗ trợ hàm insertAfter. Vì vậy mình sẽ giúp bạn tự tạo ra một hàm insertAfter cực kì dễ dàng.

Trong jQuery thì chúng ta có hàm $('selector').after(). Tuy nhiên, chúng ta đang sử dụng javascript thuần nên bạn có thể sử dụng hàm mình xây dựng trong bài này nhé.

insertAfter trong javascript là gì?

insertAfter javascript là một hàm được tạo ra nhằm mục đích giúp ta chèn các thẻ html vào đằng sau một thẻ khác. Hàm này không có sẵn trong thư viện của js, mà bạn phải tự tạo nó.

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

Javascript có hỗ tợ hàm insertBefore, hàm này có công dụng là chèn các thẻ html vào phía trước một thẻ được chỉ định. Vì vậy, ta sẽ áp dụng hàm này với một thủ thuật đơn giản để tạo ra hàm insertAfter:

Đầu tiên, chọn nút anh em tiếp theo của nút hiện có.
Sau đó, chọn nút cha của nút hiện có và gọi phương thức insertBefore () trên nút cha để chèn một nút mới trước nút anh em đó.

Cụ thể hàm này như sau:

function insertAfter(newNode, existingNode) {
    existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
}

Để hiểu được hàm trên thì bạn phải hiểu hai khái niệm insertBefore và nextSibling. Hãy click vào link để đọc nhé.

Cách sử dụng insertAfter javascript

Bây giờ mình sẽ làm một ví dụ về cách dùng hàm insertAfter ở trên nhé.

Demo RUN

<ul>
    <li>HTML</li>   
    <li id="menu">CSS</li>
    <li>jQuery</li>
</ul>
<p>
    <input type="button" value="Chèn" onclick="insertAfterMenu()"/>
</p>
<script>
    function insertAfter(newNode, existingNode) {
        existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
    }

    function insertAfterMenu(){
        let menu = document.getElementById('menu');
        let li = document.createElement('li');
        li.textContent = "Javascript";

        insertAfter(li, menu);
    }
</script>

Khi click vào button thì sẽ chèn một node vào thẻ div có id là menu.

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 insertAfter trong Javascript

insertAfter trong javascript là gì?

Cách sử dụng insertAfter 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 insertAfter trong Javascript

insertAfter trong javascript là gì?

Cách sử dụng insertAfter 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