Hướng dẫn prepend javascript

• Trang chủ
• Hướng dẫn học
• Hướng dẫn học jQuery
• .prepend[]

Định nghĩa và sử dụng

• .prepend[]: Chèn nội dung vào trong thành phần ở vị trí đầu tiên.

Cấu trúc

.prepend[nội dung]

$['div'].prepend['
nội dung thêm vào
'];
$['div'].prepend[$['h3']];

.prepend[nội dung]

Html viết:

Tiêu đề


$[function[]{
    $['div'].prepend['
nội dung thêm vào
'];
}];




Thành phần div
Thành phần div

Hiển thị trình duyệt:

Ban đầu nội dung chỉ có thành phần div, nhưng khi sử dụng prepend thì thành phần div được chèn thêm thành phần

nội dung thêm vào

vào ngay vị trí đầu tiên của thành phần div.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuerySau khi có jQuery

Thành phần div	nội dung thêm vào Thành phần div nội dung thêm vào Thành phần div

Ví dụ thêm

Html viết:

Tiêu đề


$[function[]{
    $['div'].prepend[$['h3']];
}];





thành phần p
thành phần h3

Hiển thị trình duyệt:

Ban đầu thành phần h3 nằm trong thành phần div ở vị trí bất kỳ, nhưng khi sử dụng prepend thì thành phần h3 được di chuyển ngay vị trí đầu tiên của thành phần div.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuerySau khi có jQuery

thành phần p thành phần h3	thành phần h3 thành phần p

.prepend[function[index]{...}]

Html viết:

Tiêu đề


$[function[]{
    $['div'].prepend[function[] {
        return '
' + this.className + '
';
    }];
}];




thành phần div 01
thành phần div 02

Hiển thị trình duyệt:

Với cách sử dụng function như trên, ta đã thêm bên trong mỗi thành phần div lần lượt là thành phần p với nội dung được lấy từ tên class của thành phần div, các thành phần p này nằm ở vị trí đầu tiên trong thành phần div tương ứng.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuerySau khi có jQuery

thành phần div 01 thành phần div 02	test01 thành phần div 01 test02 thành phần div 02

• Trang chủ
• Tham khảo
• jQuery
• jQuery - function
• .prepend[]

Định nghĩa và sử dụng

• .prepend[]: Chèn nội dung vào trong thành phần ở vị trí đầu tiên.

Cấu trúc

• Đã được thêm vào từ phiên bản 1.0

.prepend[nội dung]

$['div'].prepend['
nội dung thêm vào
'];
$['div'].prepend[$['h3']];

• Đã được thêm vào từ phiên bản 1.4

.prepend[nội dung]

Html viết:

Tiêu đề


$[function[]{
    $['div'].prepend['
nội dung thêm vào
'];
}];




Thành phần div
Thành phần div

Hiển thị trình duyệt:

Ban đầu nội dung chỉ có thành phần div, nhưng khi sử dụng prepend thì thành phần div được chèn thêm thành phần

nội dung thêm vào

vào ngay vị trí đầu tiên của thành phần div.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuerySau khi có jQuery

Thành phần div	nội dung thêm vào Thành phần div nội dung thêm vào Thành phần div

Ví dụ thêm

Html viết:

Tiêu đề


$[function[]{
    $['div'].prepend[$['h3']];
}];





thành phần p
thành phần h3

Hiển thị trình duyệt:

Ban đầu thành phần h3 nằm trong thành phần div ở vị trí bất kỳ, nhưng khi sử dụng prepend thì thành phần h3 được di chuyển ngay vị trí đầu tiên của thành phần div.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuerySau khi có jQuery

thành phần p thành phần h3	thành phần h3 thành phần p

.prepend[function[index]{...}]

Html viết:

Tiêu đề


$[function[]{
    $['div'].prepend[function[] {
        return '
' + this.className + '
';
    }];
}];




thành phần div 01
thành phần div 02

Hiển thị trình duyệt:

Với cách sử dụng function như trên, ta đã thêm bên trong mỗi thành phần div lần lượt là thành phần p với nội dung được lấy từ tên class của thành phần div, các thành phần p này nằm ở vị trí đầu tiên trong thành phần div tương ứng.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuerySau khi có jQuery

thành phần div 01 thành phần div 02	test01 thành phần div 01 test02 thành phần div 02