Vraag Een div-element maken in jQuery [dupliceren]


Deze vraag heeft hier al een antwoord:

Hoe maak ik een div element in jQuery?


1362
2018-05-15 10:30


oorsprong


antwoorden:


Je kunt gebruiken append (om de laatste positie van de ouder toe te voegen) of prepend (om toe te voegen op de eerste positie van ouder):

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

Als alternatief kunt u de .html() of .add() zoals vermeld in a ander antwoord.


940
2018-05-15 10:43



Vanaf jQuery 1.4 kun je attributen doorgeven aan een zelf-gesloten element, zoals zo:

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

Hier is het in de Docs

Voorbeelden zijn te vinden op jQuery 1.4 uitgebracht: de 15 nieuwe functies die u moet weten .


1867
2017-11-11 19:01



Technisch gezien $('<div></div>') zal een 'maken' div element (of meer specifiek een DIV DOM-element) maar voeg het niet toe aan uw HTML-document. Je zult dat dan moeten gebruiken in combinatie met de andere antwoorden om er daadwerkelijk iets nuttigs mee te doen (zoals het gebruik van de append() methode of dergelijke).

De manipulatie documentatie geeft je alle verschillende opties voor het toevoegen van nieuwe elementen.


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");

zal een lege div toevoegen aan <div id="main"></div>


60
2018-05-15 10:34



Dit alles werkte voor mij,

HTML-gedeelte:

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

JavaScript code:

//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



Een korte manier om div te maken is

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

Nu kan de aangepaste div worden toegevoegd aan een andere div.


49
2018-02-25 03:46



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

Dit zal nieuwe div met id "new" in body creëren.


32
2018-02-03 15:56



document.createElement('div');

22
2018-06-17 12:15



Hier is nog een techniek voor het maken van divs met jQuery.

ELEMENT KLONEN

Stel dat u een bestaande div op uw pagina hebt die u wilt klonen met jQuery (bijvoorbeeld om een ​​invoer een aantal keren in een formulier te dupliceren). Je zou dit als volgt doen.

$('#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