Câu hỏi Tạo một phần tử div trong jQuery [duplicate]


Câu hỏi này đã có câu trả lời ở đây:

Làm cách nào để tạo một div yếu tố trong jQuery?


1364
2018-05-15 10:30


gốc


Xem: Cách hiệu quả nhất để tạo các phần tử HTML bằng jQuery là gì? - falsarella
$ (document.createElement ('DIV')) - Yami Odymel


Các câu trả lời:


Bạn có thể dùng append (để thêm vào vị trí cuối cùng của phụ huynh) hoặc prepend (để thêm vào vị trí nắm tay của cha mẹ):

$('#parent').append('<div>hello</div>');    
// or
$('<div>hello</div>').appendTo('#parent');

Ngoài ra, bạn có thể sử dụng .html() hoặc là .add() như đã đề cập trong một câu trả lời khác.


942
2018-05-15 10:43



không id cần báo giá duy nhất chứ không phải là gấp đôi? Vì vậy, id = "bar" sẽ là id = 'bar' nếu không bạn sẽ đóng nó. - Ricki
@ Ricki - không, sử dụng dấu ngoặc kép cho tất cả các thuộc tính. Dấu nháy đơn không tạo ra XHTML hợp lệ, mặc dù hầu hết các trình duyệt sẽ chịu đựng được nó. - halfer
@halfer ngược lại sau đó, sử dụng dấu nháy đơn trong javascript cho bộ chọn và bất kỳ html gắn thêm nào với dấu ngoặc kép. - Ricki
Không không không! Ví dụ (và toàn bộ cuộc thảo luận vô nghĩa về các trích dẫn bên dưới) minh họa những gì không phải làm. Có một lý do tại sao jQuery cung cấp các trình truy cập thuộc tính và hàm text (): đó là vì chúng xử lý đúng các thuộc tính trích dẫn và thoát và văn bản. Chỉ cần sử dụng chúng, luôn luôn. @ ian của câu trả lời là tốt hơn trong lĩnh vực này. - Tibo
@halfer Theo như tôi biết, đó là một huyền thoại tổng (mặc dù là một phổ biến) và dấu nháy đơn xung quanh các thuộc tính trong thực tế hoàn toàn hợp lệ trong HTML, XML và XHTML. Xem stackoverflow.com/questions/2210430/… - Mark Amery


Kể từ jQuery 1.4, bạn có thể chuyển các thuộc tính cho một phần tử tự đóng như sau:

jQuery('<div/>', {
    id: 'some-id',
    class: 'some-class',
    title: 'now this div has a title!'
}).appendTo('#mySelector');

Ở đây nó ở trong Tài liệu

Ví dụ có thể được tìm thấy tại jQuery 1.4 Phát hành: 15 tính năng mới bạn phải biết .


1869
2017-11-11 19:01



Bạn có thể đọc về nó trong các tài liệu tại api.jquery.com/jQuery/#jQuery2 (đoạn cuối của phần) - Gabriele Petrioli
Đây là một giải pháp tuyệt vời và lý tưởng vì bạn có thể cung cấp cho nó một số thuộc tính trước khi thực hiện sửa đổi DOM xâm lấn. - knowncitizen
@knowncitizen nhưng đó cũng giống như viết tất cả nội tuyến. ví dụ. $('<div id="foo" class="bar">text</div>').appendTo('body'); v.v. - trusktr
Tôi muốn điều này làm việc trong ie7 + 8: / - Johan
Nếu bạn muốn tạo tên lớp khi đang di chuyển với div được tạo động, bạn có thể cần đặt dấu nháy đơn quanh lớp, để mọi thứ hoạt động trong IE7 và IE8 - ví dụ 'class': 'my-class- Tên' - blackhawk


Về mặt kỹ thuật $('<div></div>') sẽ 'tạo' một div phần tử (hoặc cụ thể hơn là một phần tử DOM DIV) nhưng sẽ không thêm nó vào tài liệu HTML của bạn. Sau đó, bạn sẽ cần phải sử dụng kết hợp với các câu trả lời khác để thực sự làm bất kỳ điều gì hữu ích với nó (chẳng hạn như sử dụng append() hoặc phương thức tương tự).

Các tài liệu thao tác cung cấp cho bạn tất cả các tùy chọn khác nhau về cách thêm các phần tử mới.


218
2018-05-15 10:49



làm thế nào để bạn cung cấp cho div mới của bạn một id mới? và nói rằng id phải năng động? tức là '<div id =' + myNewId + '> </ div>' - topwik
sử dụng phương thức .attr (). - samjudson
hoặc phương thức prop () có lẽ ... - samjudson


d = document.createElement('div');
$(d).addClass(classname)
    .html(text)
    .appendTo($("#myDiv")) //main div
.click(function () {
    $(this).remove();
})
    .hide()
    .slideToggle(300)
    .delay(2500)
    .slideToggle(300)
    .queue(function () {
    $(this).remove();
});

183
2017-08-07 22:08



@ JRM tại sao điều này tốt hơn câu trả lời của ian? - Alexander Suraphel
Điều này là tốt hơn, xin lỗi tốt nhất, câu trả lời bởi vì nó giải thích tất cả mọi thứ và điều đó quá trong một cách rất đơn giản và dễ hiểu trong nháy mắt. : D - Sony Mathew
Không có nó - nó thậm chí không sử dụng jQuery để thực sự tạo ra phần tử. Đây có thể là một câu trả lời, nhưng nó không phải là câu trả lời cho câu hỏi này, đó là "Làm cách nào để tạo một phần tử div trong jQuery?" Điều này không sử dụng jQuery để tạo ra một div, nhưng thay vì thao tác một DIV được tạo ra bằng cách sử dụng JavaScript chuẩn. Câu trả lời này ném những thứ khác, như xử lý nhấp chuột, hình động trong hỗn hợp là tốt. Câu trả lời của ian ở trên là câu trả lời đúng, mặc dù câu trả lời được chọn là đúng về mặt kỹ thuật. Điều này nên được bình chọn là hoàn toàn tắt chủ đề. - Carnix
Theo câu trả lời này sử dụng $(document.createElement("div")) thay vì $("<div>") là nhanh hơn, nhưng kết quả trong một yếu tố jQuery tương tự, trong khi vẫn có thể đọc được. - luckydonald
Đó là một phương pháp khác, và nó có vẻ sạch sẽ. Tại sao hoạt ảnh được thêm vào không rõ ràng, nhưng dường như, ví dụ, cho thấy cách tạo phần tử phong phú. Tôi tự hỏi ý nghĩa của việc đọc cấu trúc DOM giữa các phương thức khác nhau này là gì? Tôi biết rằng chúng tạo ra các hậu quả dựng hình khác nhau, tôi biết rằng việc thêm và loại bỏ các phần tử bằng cách sử dụng jQuery được sử dụng để gây ra lỗi hiển thị trong chrome chẳng hạn, nhưng tại thời điểm tôi đã không làm như vậy t biết cách sử dụng .createElement đúng cách. - Olivier Butler


div = $("<div>").html("Loading......");
$("body").prepend(div);    

71
2018-05-15 10:36





$("<div/>").appendTo("div#main");

sẽ thêm một div trống vào <div id="main"></div>


60
2018-05-15 10:34





Tất cả những điều này đều hiệu quả với tôi,

Phần HTML:

<div id="targetDIV" style="border: 1px solid Red">
    This text is surrounded by a DIV tag whose id is "targetDIV".
</div>

Mã JavaScript:

//Way 1: appendTo()
<script type="text/javascript">
    $("<div>hello stackoverflow users</div>").appendTo("#targetDIV"); //appendTo: Append at inside bottom
</script>

//Way 2: prependTo()
<script type="text/javascript">
    $("<div>Hello, Stack Overflow users</div>").prependTo("#targetDIV"); //prependTo: Append at inside top
</script>

//Way 3: html()
<script type="text/javascript">
    $("#targetDIV").html("<div>Hello, Stack Overflow users</div>"); //.html(): Clean HTML inside and append
</script>

//Way 4: append()
<script type="text/javascript">
    $("#targetDIV").append("<div>Hello, Stack Overflow users</div>"); //Same as appendTo
</script>

51
2018-01-28 04:41





Một cách ngắn để tạo div là

var customDiv = $("<div/>");

Bây giờ div tùy chỉnh có thể được thêm vào bất kỳ div khác.


49
2018-02-25 03:46





$("<div/>").attr('id','new').appendTo('body');    

Điều này sẽ tạo ra div mới với id "mới" vào cơ thể.


32
2018-02-03 15:56