web-dev-qa-db-fra.com

Création d'un élément div dans jQuery

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

javascriptjqueryhtmlappendjquery-append
1477
useranon

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

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

Vous pouvez également utiliser les fonctions .html() ou .add() comme indiqué dans un réponse différente .

1030
cm2

Depuis jQuery 1.4, vous pouvez passer des attributs à un élément auto-fermé comme ceci:

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

La voici dans Docs

Des exemples peuvent être trouvés à version jQuery 1.4: les 15 nouvelles fonctionnalités à connaître.

1953
ian

Techniquement, $('<div></div>') créera un élément div (ou plus spécifiquement un élément DIV DOM) mais ne l'ajoutera pas à votre document HTML. Vous devrez ensuite l’utiliser en combinaison avec les autres réponses pour en faire quelque chose d’utile (par exemple, en utilisant la méthode append() ou similaire).

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

227
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();
});
192
celoron
div = $("<div>").html("Loading......");
$("body").prepend(div);
79
Ish
$("<div/>").appendTo("div#main");

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

63
Caius

Un moyen court de créer div est

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

La div personnalisée peut maintenant être ajoutée à une autre div.

57
maxspan

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>
55
Hoque
$("<div/>").attr('id','new').appendTo('body');

Cela créera une nouvelle div avec l'id "new" dans body.

38
Ajay
document.createElement('div');
26
eomeroff

Voici une autre technique pour créer des div avec jQuery.

ELEMENT CLONING

Supposons que votre page comporte un div que vous souhaitez cloner à l'aide de jQuery (par exemple, pour dupliquer une entrée plusieurs fois dans un formulaire). Vous le feriez 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>
19
Steven Moseley

Créer une DIV en mémoire

$("<div/>");

Ajoutez des gestionnaires de clic, des styles, etc. - et enfin insérez dans le 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>

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

15
Roko C. Buljan

tout simplement si vous voulez créer une balise 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 à la flay, vous pouvez essayer ceci

selectBody.append(div);
9
MEAbid
<div id="foo"></div>

$('#foo').html('<div></div>');
8
egaga

alternativement, vous pouvez aussi utiliser appendTo() avec une syntaxe différente:

$("#foo").append("<div>hello world</div>");
$("<div>hello world</div>").appendTo("#foo");
6
davidman77

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

Ceci est très similaire à réponse de celoron , mais je ne sais pas pourquoi ils ont utilisé document.createElement au lieu de la 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 voyez maintenant que quelque chose va être ajouté au corps. Mais c’est une question de goût, comme toujours lorsque vous écrivez un code ou un texte.

En général, utilisez le moins possible de HTML 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.

6
nst1nctz

Vous pouvez créer des étiquettes séparées à l'aide de la méthode .jquery(). Et créez des tags enfants en utilisant la méthode .append(). Comme jQuery prend en charge le chaînage, vous pouvez également appliquer CSS de deux manières. Spécifiez-le dans la classe ou appelez simplement .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);

Premièrement, j'ajoute une balise de liste à ma balise div et y insère des données JSON. Ensuite, je crée une balise enfant de liste, à condition que certains attributs. J'ai assigné la valeur à une variable, de sorte qu'il me soit facile de l'ajouter.

4
Shruthi Acharya

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

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

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

Ajoutez maintenant HTML à cet ajout de test:

$("#test").append("Your HTML");
2
Atul

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

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

ou

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

Cela donne le même résultat.

1
Vennsoh

J'espère que cela aide le code. :) (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
Cagdas

$(HTMLelement) peut le réussir. Si vous voulez une division epmty, utilisez-la en tant que $('<div></div>');. Vous pouvez aussi définir les autres éléments de la même manière. Si vous souhaitez modifier le code HTML interne après sa création, vous pouvez utiliser la méthode html(). Pour obtenir outerHTML en tant que chaîne, vous pouvez utiliser 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
Kamuran Sönecek

Vous pouvez utiliser .add() pour créer un nouveau jQuery objet et ajouter à l'élément ciblé. Utilisez ensuite le chaînage pour continuer.

Par exemple 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
Tushar