Hướng dẫn jquery append string as html - jquery nối chuỗi dưới dạng html

.Append (nội dung [, nội dung]) Trả về: jQueryReturns: jQuery

Mô tả: Chèn nội dung, được chỉ định bởi tham số, vào cuối mỗi phần tử trong tập hợp các phần tử phù hợp.Insert content, specified by the parameter, to the end of each element in the set of matched elements.

  • Phiên bản được thêm vào: 1.0.Append (nội dung [, nội dung]).append( content [, content ] )

    • Nội dung

      Phần tử DOM, nút văn bản, mảng của các phần tử và nút văn bản, chuỗi HTML hoặc đối tượng jQuery để chèn ở cuối mỗi phần tử trong tập hợp các phần tử phù hợp.

    • Nội dung

      Phần tử DOM, nút văn bản, mảng của các phần tử và nút văn bản, chuỗi HTML hoặc đối tượng jQuery để chèn ở cuối mỗi phần tử trong tập hợp các phần tử phù hợp.

  • Một hoặc nhiều phần tử DOM bổ sung, nút văn bản, mảng các phần tử và nút văn bản, chuỗi HTML hoặc đối tượng jQuery để chèn ở cuối mỗi phần tử trong tập hợp các phần tử phù hợp..append( function )

    • function

      Phiên bản được thêm vào: 1.4.Append (chức năng)

Một hàm trả về chuỗi HTML, phần tử DOM, nút văn bản hoặc đối tượng jQuery để chèn ở cuối mỗi phần tử trong tập hợp các phần tử phù hợp. Nhận vị trí chỉ mục của phần tử trong tập hợp và giá trị HTML cũ của phần tử làm đối số. Trong hàm, this đề cập đến phần tử hiện tại trong tập hợp.

Phương thức .append() chèn nội dung được chỉ định là đứa con cuối cùng của mỗi phần tử trong bộ sưu tập jQuery (để chèn nó là đứa trẻ đầu tiên, sử dụng ____10).

Các phương thức .append()

$( ".inner" ).append( "

Test

" );

2 thực hiện cùng một nhiệm vụ. Sự khác biệt chính là trong cú pháp cụ thể, trong vị trí của nội dung và mục tiêu. Với .append(), biểu thức chọn trước phương thức là thùng chứa mà nội dung được chèn. Mặt khác, với

$( ".inner" ).append( "

Test

" );

2, nội dung đi trước phương thức, dưới dạng biểu thức chọn hoặc như đánh dấu được tạo ra khi đang bay và nó được chèn vào thùng chứa đích.

1

2

3

4

5

Hãy xem xét HTML sau:

<div class="inner">Hellodiv>

<div class="inner">Goodbyediv>

1

Bạn có thể tạo nội dung và chèn nó vào một số yếu tố cùng một lúc:

$( ".inner" ).append( "

Test

" );

Mỗi phần tử

$( ".inner" ).append( "

Test

" );

5 bên trong có nội dung mới này:

1

Bạn cũng có thể chọn một phần tử trên trang và chèn nó vào một phần tử khác:

$( ".container" ).append( $( "h2" ) );

1

2

3

4

5

Hãy xem xét HTML sau:

<div class="inner">Hellodiv>

<div class="inner">Goodbyediv>

: If there is more than one target element, however, cloned copies of the inserted element will be created for each target except for the last one.

Bạn có thể tạo nội dung và chèn nó vào một số yếu tố cùng một lúc:

$( ".inner" ).append( "

Test

" );

Mỗi phần tử

$( ".inner" ).append( "

Test

" );

5 bên trong có nội dung mới này:

1

2

3

4

5

Bạn cũng có thể chọn một phần tử trên trang và chèn nó vào một phần tử khác:

$( ".container" ).append( $( "h2" ) );

Nếu một phần tử được chọn theo cách này được chèn vào một vị trí duy nhất ở nơi khác trong DOM, nó sẽ được chuyển vào mục tiêu (không được nhân bản):

  • Quan trọng: Tuy nhiên, nếu có nhiều hơn một phần tử đích, tuy nhiên, các bản sao được nhân bản của phần tử được chèn sẽ được tạo cho từng mục tiêu ngoại trừ phần cuối cùng.
  • Lập luận bổ sung

Examples:

Tương tự như các phương pháp thêm nội dung khác như

$( ".inner" ).append( "

Test

" );

0 và

$( ".inner" ).append( "

Test

" );

7, .append() cũng hỗ trợ truyền trong nhiều đối số làm đầu vào. Đầu vào được hỗ trợ bao gồm các thành phần DOM, đối tượng jQuery, chuỗi HTML và mảng các phần tử DOM.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

Ví dụ: sau đây sẽ chèn hai

$( ".inner" ).append( "

Test

" );

5 mới và

$( ".inner" ).append( "

Test

" );

5 hiện tại là ba nút con cuối cùng của cơ thể:

Demo:

var $newdiv1 = $( "

" ),

newdiv2 = document.createElement( "div" ),

existingdiv1 = document.getElementById( "foo" );

$( "body" ).append( $newdiv1, [ newdiv2, existingdiv1 ] );

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

.append() có thể chấp nhận bất kỳ số lượng đối số bổ sung nào, nên có thể đạt được kết quả tương tự bằng cách truyền trong ba

$( ".inner" ).append( "

Test

" );

5 như ba đối số riêng biệt, như vậy:

$( ".container" ).append( $( "h2" ) );

3. Loại và số lượng đối số sẽ phụ thuộc phần lớn vào cách bạn thu thập các yếu tố trong mã của bạn.

Demo:

Ghi chú bổ sung:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

Theo thiết kế, bất kỳ hàm tạo hoặc phương thức nào chấp nhận chuỗi HTML - jQuery (), .Append (), .After (), v.v. - có khả năng thực thi mã. Điều này có thể xảy ra bằng cách tiêm thẻ tập lệnh hoặc sử dụng các thuộc tính HTML thực thi mã (ví dụ:

$( ".container" ).append( $( "h2" ) );

4). Không sử dụng các phương pháp này để chèn các chuỗi thu được từ các nguồn không tin cậy như tham số truy vấn URL, cookie hoặc đầu vào hình thức. Làm như vậy có thể giới thiệu các lỗ hổng về chữ ký chéo (XSS). Xóa hoặc thoát bất kỳ đầu vào người dùng trước khi thêm nội dung vào tài liệu.

Demo: