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

à 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 .

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.

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();
});

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

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

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

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>

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.

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

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

document.createElement('div');

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>

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à.}

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

<div id="foo"></div>

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

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.

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.

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

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

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

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

ou

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

donne le même résultat.

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

$(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;

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.

$( "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>