Cách tự động thêm phần tử html bằng cách sử dụng jquery?

Bài đăng này sẽ thảo luận về cách tạo động phần tử

trong JavaScript và jQuery

1. Sử dụng JavaScript

Trong vanilla JavaScript, bạn có thể sử dụng phương thức createElement[] gốc để tạo phần tử HTML

appendChild[] method to append the
element to another container.

JS


1

2

3

4

5

6

7

8

tài liệu. addEventListener['DOMContentLoaded', function[] {

    var div = tài liệu.createElement['div'];

    div. = 'container';

    div. innerHTML = 'Chào bạn. ';

    div. Tên lớp = 'border pad';

 

    tài liệu. cơ thể. appendChild[div];

}, false];

HTML


1

2

3

4

< lang="en">

    

CSS


1

2

3

4

5

6

7

.border {

    đường viền. 1px đặc xám;

}

 

.pad {

    phần đệm. 15px;

}


Chỉnh sửa trong JSFiddle

2. Sử dụng jQuery

Với jQuery, bạn có thể sử dụng . append[] phương pháp nối thêm phần tử

vào cuối vùng chứa đã chỉ định.

JS


1

2

3

4

5

6

7

8

9

$[tài liệu]. sẵn sàng[chức năng[] {

    $['#outerdiv'].nối thêm[

        $[']< . .ủng hộ[{

            id. 'innerdiv',

            innerHTML. 'Chào bạn. ',

            tên lớp. 'đường viền đệm'

        }]

    ];

}];

HTML


1

2

3

4

5

6

< lang="en">

    

Chủ Đề