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

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

comment créer un div élément dans jQuery ?

1383
demandé sur John Slegers 2009-05-15 14:30:24
la source

26 ответов

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

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

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

957
répondu cm2 2017-12-06 20:04:39
la source

à 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');

voici dans le Docs

Exemples peuvent être trouvés à jQuery 1.4 Sortie: Le 15 Nouvelles Fonctionnalités que vous Devez Savoir .

1884
répondu ian 2018-06-04 08:40:13
la source

techniquement $('<div></div>') va 'créer' un élément div (ou plus spécifiquement un élément DIV DOM) mais ne l'ajoutera pas à votre document HTML. Vous devrez ensuite utiliser qu'en combinaison avec d'autres réponses à réellement faire quelque chose d'utile avec elle (comme l'utilisation de la append() la méthode, ou autres).

la documentation de manipulation vous donne toutes les options sur la façon d'ajouter de nouveaux éléments.

222
répondu samjudson 2014-01-02 21:58:57
la source
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();
});
185
répondu celoron 2015-09-29 09:35:29
la source
div = $("<div>").html("Loading......");
$("body").prepend(div);    
72
répondu Ish 2013-09-05 16:57:54
la source
$("<div/>").appendTo("div#main");

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

61
répondu Caius 2017-07-11 15:07:51
la source

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>
54
répondu Hoque 2013-07-30 22:26:35
la source

Un court chemin de la création de la div est

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

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

51
répondu maxspan 2017-07-11 15:06:01
la source
$("<div/>").attr('id','new').appendTo('body');    

cela créera une nouvelle div avec id" new " dans le corps.

34
répondu Ajay 2017-07-11 15:07:41
la source
document.createElement('div');
23
répondu eomeroff 2013-08-27 12:56:01
la source

voici une autre technique pour créer des divs avec jQuery.

CLONAGE D'ÉLÉMENTS

dire que vous avez un div existant dans votre page que vous voulez cloner en utilisant jQuery (par exemple pour dupliquer une entrée un certain nombre de fois dans un formulaire). Vous faire comme suit.

$('#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>
17
répondu Steven Moseley 2016-11-21 15:27:37
la source

Créer une mémoire DIV

$("<div/>");

ajouter des gestionnaires de clic, des styles, etc. - et enfin insérer dans DOM dans un sélecteur d'élément cible:

$("<div/>", {

  // PROPERTIES HERE
  
  text: "Click me",
  id: "example",
  "class": "myDiv",      // ('class' is still better in quotes)
  css: {           
    color: "red",
    fontSize: "3em",
    cursor: "pointer"
  },
  on: {
    mouseenter: function() {
      console.log("PLEASE... "+ $(this).text());
    },
    click: function() {
      console.log("Hy! My ID is: "+ this.id);
    }
  },
  append: "<i>!!</i>",
  appendTo: "body"      // Finally, append to any selector
  
}); // << no need to do anything here as we defined the properties internally.
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

similaire à la réponse de ian, mais je n'ai trouvé aucun exemple qui traite correctement l'utilisation des méthodes dans la déclaration d'objet de propriétés donc voilà.

14
répondu Roko C. Buljan 2017-05-01 16:05:37
la source

simplement si vous voulez créer n'importe quelle étiquette HTML vous pouvez essayer ceci par exemple

var selectBody = $('body');
var div = $('<div>');
var h1  = $('<h1>');
var p   = $('<p>');

si vous voulez ajouter n'importe quel élément sur le flay, vous pouvez essayer ce

selectBody.append(div);
8
répondu MEAbid 2016-10-14 09:59:06
la source
<div id="foo"></div>

$('#foo').html('<div></div>');
7
répondu egaga 2014-03-24 09:00:21
la source

si vous utilisez Jquery > 1.4, vous êtes le meilleur de avec réponse de Ian . Autrement, j'utiliserais cette méthode:

c'est très similaire à réponse de celoron , mais je ne sais pas pourquoi ils ont utilisé document.createElement au lieu de notation Jquery.

$("body").append(function(){
        return $("<div/>").html("I'm a freshly created div. I also contain some Ps!")
            .attr("id","myDivId")
            .addClass("myDivClass")
            .css("border", "solid")                 
            .append($("<p/>").html("I think, therefore I am."))
            .append($("<p/>").html("The die is cast."))
});

//Some style, for better demonstration if you want to try it out. Don't use this approach for actual design and layout!
$("body").append($("<style/>").html("p{background-color:blue;}div{background-color:yellow;}div>p{color:white;}"));

je pense aussi que l'utilisation de append() avec une fonction de rappel est dans ce cas plus lisible, parce que vous maintenant immédiatement que quelque chose va être ajoutées au corps. Mais c'est une question de goût, comme toujours quand on écrit un code ou un texte.

en général, utilisez moins de HTML que possible dans le code JQuery, car il s'agit principalement de code spaghetti. Il est sujet aux erreurs et difficile à maintenir, car la chaîne HTML peut facilement contenir des fautes de frappe. En outre, il mélange un langage de balisage (HTML) avec un langage de programmation (Javascript/Jquery), ce qui est généralement une mauvaise idée.

5
répondu nst1nctz 2017-07-11 15:05:02
la source

vous pouvez créer des étiquettes séparées en utilisant la méthode .jquery() . Et créer des étiquettes enfant en utilisant la méthode .append() . Comme jQuery supporte le chaînage, vous pouvez également appliquer CSS de deux façons. Soit le spécifier dans la classe ou simplement appeler .attr() :

var lTag = jQuery("<li/>")
.appendTo(".div_class").html(data.productDisplayName);

var aHref = jQuery('<a/>',{         
}).appendTo(lTag).attr("href", data.mediumImageURL);

jQuery('<img/>',{                                               
}).appendTo(aHref).attr("src", data.mediumImageURL).attr("alt", data.altText);

tout d'abord, j'ajoute une balise list à ma balise div et j'y insère des données JSON. Ensuite, je crée une balise enfant de liste, à condition qu'il y ait un attribut. J'ai attribué la valeur d'une variable, de sorte qu'il serait facile pour moi de l'ajouter.

4
répondu Shruthi Acharya 2017-07-11 15:06:47
la source

à ajouter éventuellement() vous pouvez également utiliser appendTo() qui a une syntaxe différente:

$("#foo").append("<div>hello world</div>");
$("<div>hello world</div>").appendTo("#foo");    
4
répondu davidman77 2017-12-22 18:56:10
la source

je pense que c'est la meilleure façon d'ajouter un div:

pour ajouter un test div à l'élément div avec ID div_id:

$("#div_id").append("div name along with id will come here, for example, test");

maintenant ajouter HTML à ce div test ajouté:

$("#test").append("Your HTML");
2
répondu Atul 2013-07-30 22:22:53
la source

Si c'est juste une div vide, c'est suffisant:

$("#foo").append("<div>")

ou

$("#foo").append("<div/>")

donne le même résultat.

1
répondu Vennsoh 2014-11-29 12:14:48
la source

j'espère que ça aide à coder. :) (Que j'utilise)

function generateParameterForm(fieldName, promptText, valueType) {
    //<div class="form-group">
    //<label for="yyy" class="control-label">XXX</label>
    //<input type="text" class="form-control" id="yyy" name="yyy"/>
    //</div>

    // Add new div tag
    var form = $("<div/>").addClass("form-group");

    // Add label for prompt text
    var label = $("<label/>").attr("for", fieldName).addClass("control-label").text(promptText);

    // Add text field
    var input = $("<input/>").attr("type", "text").addClass("form-control").addClass(valueType).attr("id", fieldName).attr("name", fieldName);

    // lbl and inp => form
    $(form).append(label).append(input);

    return $(form);
}
1
répondu Cagdas 2015-09-21 03:42:31
la source

$(HTMLelement) peut réussir. Si vous voulez un epmty div utilisez-le comme $('<div></div>'); . Aussi, vous pouvez définir les autres éléments par la même méthode. Si vous voulez changer le HTML intérieur après avoir créé, vous pouvez utiliser la méthode html() . Pour obtenir outerHTML comme chaîne de caractères que vous pouvez utiliser est comme ceci:

var element = $('<div/>');
var innerHTML = element.html(); // if you want set new HTML use it like this element.html('<b>new HTML</b>');
var outerHTML = element[0].outerHTML;
1
répondu Kamuran Sönecek 2017-07-11 15:04:13
la source

vous pouvez utiliser .add() pour créer un nouveau 151960920" jQuery 151980920 objet et ajouter à l'élément visé. Utilisez l'enchaînement puis de continuer plus loin.

pour eg jQueryApi :

$( "div" ).css( "border", "2px solid red" )
  .add( "p" )
  .css( "background", "yellow" );
 div {
    width: 60px;
    height: 60px;
    margin: 10px;
    float: left;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
0
répondu Tushar 2015-09-25 14:20:46
la source

et ça? Ici, pElement se réfère à l'élément que vous voulez que ce div à l'intérieur (pour être un enfant de! :).

$("pElement").append("<div></div");

vous pouvez facilement ajouter n'importe quoi de plus à ce div dans la chaîne - attributs, contenu, Vous l'appelez. Notez, pour les valeurs d'attribut, vous devez utiliser les guillemets.

-1
répondu Aravind Suresh 2017-05-30 14:05:59
la source

je viens de faire un petit jQuery plugin pour cela.

il suit votre syntaxe:

var myDiv = $.create("div");

DOM l'ID du noeud peut être spécifié comme second paramètre:

var secondItem = $.create("div","item2");

c'est grave? Aucun. Mais cette syntaxe est mieux que $("

") , et c'est une très bonne valeur pour leur argent.

(réponse partielle) copié de: document jQuery.createElement equivalent? )

-2
répondu ern0 2017-05-23 15:18:25
la source

utiliser:

$("#parentDiv").append("<div id='childDiv'>new div to be produced</div>");

je pense que ça aidera.

-2
répondu Johnfranklien 2014-11-29 12:14:10
la source

Autres questions sur javascript jquery html append jquery-append