Phương thức before() trong jQuery

1) Phương thức before() trong jQuery

- Phương thức before() dùng để thêm "một nội dung gì đó" vào phía trước phần tử được chọn.

- Lưu ý: Thông thường thì "nội dung" ở đây có thể là văn bản hoặc là phần tử HTML.

2) Cách sử dụng phương thức before() trong jQuery

- Đối với phương thức before(), chúng ta có hai trường hợp sử dụng tương ứng với hai loại cú pháp:

Cú pháp 1:

- Cú pháp này thường được sử dụng trong trường hợp bộ chọn chỉ tìm được một phần tử trùng khớp hoặc bạn muốn tất cả các phần tử trùng khớp đều được thiết lập chung một giá trị.

$(selector).before(content);

- Dưới đây là bảng mô tả ý nghĩa & cách sử dụng các tham số trong cú pháp trên:

Cú pháp 2:

- Cú pháp này thường được sử dụng trong trường hợp bộ chọn tìm được nhiều phần tử trùng khớp và bạn muốn mỗi phần tử trùng khớp được thiết lập một giá trị riêng.

$(selector).before(function(index){
    return content;
});

- Dưới đây là bảng mô tả ý nghĩa & cách sử dụng các tham số trong cú pháp trên:

3) Một số ví dụ

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").before("<i><u>Hello JavaScript</u></i>");
        });
    });
</script>

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").before(function(n){
                if(n==0){return "<h1>Lập Trình Web</h1>";}
                if(n==1){return "<h2>Hello jQuery</h2>";}
                if(n==2){return "<u>Tài liệu học</u>";}
            });
        });
    });
</script>

4) Điểm giống và khác giữa before() và insertBefore()

- Dưới đây là bảng mô tả điểm giống và khác giữa phương thức before() và insertBefore():