Question Création d'un élément div dans jQuery [duplicate]


Cette question a déjà une réponse ici:

Comment puis-je créer un div élément dans jQuery?


1362
2018-05-15 10:30


origine


Réponses:


Vous pouvez utiliser append (pour ajouter à la dernière position du parent) ou prepend (à ajouter à la première position du parent):

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

Alternativement, vous pouvez utiliser le .html() ou .add() comme mentionné dans un réponse différente.


940
2018-05-15 10:43



À partir de jQuery 1.4, vous pouvez passer des attributs à un élément auto-fermé comme suit:

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

Ici c'est dans le Docs

Des exemples peuvent être trouvés à Lancement de jQuery 1.4: les 15 nouvelles fonctionnalités que vous devez savoir .


1867
2017-11-11 19:01



Techniquement $('<div></div>') va «créer» un div élément (ou plus spécifiquement un élément DIV DOM) mais ne l'ajoutera pas à votre document HTML. Vous devrez ensuite utiliser cela en combinaison avec les autres réponses pour réellement faire quelque chose d'utile avec lui (comme en utilisant le append() méthode ou similaire).

le documentation de manipulation vous donne toutes les options possibles pour ajouter de nouveaux éléments.


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

ajoutera un div vierge à <div id="main"></div>


60
2018-05-15 10:34



Tout cela a fonctionné pour moi,

Partie HTML:

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

Code 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



Une courte façon de créer div est

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

Maintenant, le div personnalisé peut être ajouté à n'importe quel autre div.


49
2018-02-25 03:46



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

Cela va créer une nouvelle div avec id "nouveau" dans le corps.


32
2018-02-03 15:56



document.createElement('div');

22
2018-06-17 12:15