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 vanilla JavaScript, bạn có thể sử dụng phương thức createElement() gốc để tạo phần tử HTML 1 2 3 4 5 6 7 8 tài liệu. addEventListener('DOMContentLoaded', function() { var div = tài liệu.createElement('div'); div. là = 'container'; div. innerHTML = 'Chào bạn. '; div. Tên lớp = 'border pad'; tài liệu. cơ thể. appendChild(div); }, false); 1 2 3 4 <. loại tài liệu html> 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 Với jQuery, bạn có thể sử dụng . append() phương pháp nối thêm phần tử 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' }) ); }); 1 2 3 4 5 6 <. loại tài liệu html> 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 1 2 3 $(tài liệu). sẵn sàng(chức năng() { $('#outerdiv').append(''''''''''''); }); 1 2 3 4 5 6 <. loại tài liệu html> 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 1 2 3 $(tài liệu). sẵn sàng(chức năng() { $('''''''''''''''). appendTo('#outerdiv'); }); 1 2 3 4 5 6 <. loại tài liệu html> 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 Đó là tất cả về cách tạo động phần tử div trong JavaScript và jQuery |
