Pertanyaan Membuat elemen div di jQuery [duplikat]


Pertanyaan ini sudah memiliki jawaban di sini:

Bagaimana cara membuat file div elemen dalam jQuery?


1362
2018-05-15 10:30


asal


Jawaban:


Kamu dapat memakai append (untuk ditambahkan pada posisi terakhir orang tua) atau prepend (untuk ditambahkan pada posisi tinju orang tua):

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

Atau, Anda dapat menggunakan .html() atau .add() sebagaimana disebutkan dalam jawaban yang berbeda.


940
2018-05-15 10:43



Pada jQuery 1.4 Anda dapat meneruskan atribut ke elemen yang ditutup sendiri seperti:

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

Ini dia di Dokumen

Contohnya dapat ditemukan di jQuery 1.4 Dirilis: Ke-15 Fitur Baru yang Harus Anda Ketahui .


1867
2017-11-11 19:01



Secara teknis $('<div></div>') akan 'membuat' a div elemen (atau lebih tepatnya elemen DIV DOM) tetapi tidak akan menambahkannya ke dokumen HTML Anda. Anda akan perlu menggunakannya dalam kombinasi dengan jawaban lain untuk benar-benar melakukan sesuatu yang berguna dengannya (seperti menggunakan append() metode atau semacamnya).

Itu dokumentasi manipulasi memberi Anda semua berbagai opsi tentang cara menambahkan elemen baru.


218
2018-05-15 10:49



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



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

71
2018-05-15 10:36



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

akan menambahkan div kosong ke <div id="main"></div>


60
2018-05-15 10:34



Semua ini berhasil untukku,

Bagian HTML:

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

Kode 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



Cara singkat untuk membuat div adalah

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

Sekarang div khusus dapat ditambahkan ke div lain.


49
2018-02-25 03:46



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

Ini akan membuat div baru dengan id "baru" menjadi badan.


32
2018-02-03 15:56



document.createElement('div');

22
2018-06-17 12:15



Berikut teknik lain untuk membuat div dengan jQuery.

ELEMEN CLONING

Katakanlah Anda memiliki div yang ada di halaman Anda yang ingin Anda clone menggunakan jQuery (mis. Untuk menduplikasi input beberapa kali dalam bentuk). Anda akan melakukannya sebagai berikut.

$('#clone_button').click(function() {
  $('#clone_wrapper div:first')
  .clone()
  .append('clone')
  .appendTo($('#clone_wrapper'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clone_wrapper">
  <div>
    Div
  </div>
</div>

<button id="clone_button">Clone me!</button>


16
2017-11-27 13:16