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

StackOverflow https://stackoverflow.com/questions/867916

Question

    

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

    
            
  •              jQuery document.createElement équivalent?                                      13 réponses                          
    •     
    

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

Était-ce utile?

La solution

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

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

Vous pouvez utiliser le ou .html() comme mentionné dans .add() un différent réponse.

Autres conseils

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

Ici, il est dans le Docs

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

Techniquement va $('<div></div>') « créer » un élément div (ou plus précisément un élément DIV DOM) mais pas l'ajouter à votre document HTML. Vous devrez alors utiliser qu'en combinaison avec les autres réponses à faire quoi que ce soit d'utile (par exemple en utilisant la méthode ou similaire append()).

vous donne toutes les différentes 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");

va ajouter une div vide à <div id="main"></div>

Une façon courte de créer div est 

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

Maintenant, le div personnalisé peut être ajouté à tout autre div.

Tous ces travaillé pour moi,

HTML partie: 

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

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

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

document.createElement('div');

Voici une autre technique pour la création divs avec jQuery.

ELEMENT Clonage

Disons que vous avez un div existant dans votre page que vous souhaitez cloner en utilisant jQuery (par exemple pour dupliquer une entrée plusieurs fois sous une forme). 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>

Créer un DIV en mémoire 

$("<div/>");

Ajoutez des gestionnaires de clic, 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 ian, mais j'ai trouvé aucun exemple qui traite correctement l'utilisation de méthodes dans les les propriétés de l'objet déclaration donc il vous allez.

tout simplement si vous voulez créer une balise HTML, vous pouvez essayer par exemple 

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

si vous voulez ajouter un élément sur le Flay, vous pouvez essayer 

selectBody.append(div);

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

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

en variante pour ajouter () vous pouvez également utiliser qui a une appendTo() syntaxe différente: 

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

Vous pouvez créer des balises séparées en utilisant la méthode .jquery(). Et créer des balises enfants en utilisant la méthode .append(). Comme jQuery soutient Enchaînement, vous pouvez également appliquer CSS de deux façons. Soit le spécifier dans la classe ou tout 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, je suis une étiquette de l'ajout liste à mon balise div et l'insertion de données JSON en elle. Ensuite, je suis en train de créer une balise enfant de la liste, à condition que certains attributs. J'ai attribué la valeur à une variable, de sorte qu'il serait facile pour moi de l'ajouter.

S'il est juste un vide div, cela suffit: 

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

ou 

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

Il donne le même résultat.

J'espère que le code aide. :) (je l'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 le succès il. Si vous voulez un div epmty l'utiliser comme $('<div></div>');. vous pouvez également définir les autres éléments de la même méthode. Si vous voulez changer HTML intérieur après créé, vous pouvez utiliser la méthode html(). Pour obtenir outerHTML sous forme de chaîne, 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 pour créer une .add() nouvelle jQuery objet et ajouter à l'élément ciblé. Utilisez enchaînant ensuite aller plus loin.

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

Comment cela? Ici, fait référence à l'pElement élément que vous voulez que ce à l'intérieur div (être un enfant de:). 

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

Vous pouvez facilement ajouter quelque chose de plus à cette chaîne dans la <=> - Attributs, contenu, vous le nom. Prenez note, pour les valeurs d'attributs, vous devez utiliser les guillemets à droite.

Je viens de faire un petit plugin jQuery pour cela.

Il suit votre syntaxe: 

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

DOM ID de nœud peut être spécifié en tant que second paramètre: 

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

est-ce grave? Non, mais cette syntaxe est mieux que $ ( "

") , et il est un très bon rapport qualité pour cet argent.

(Réponse partiellement copié à partir de: jQuery document.createElement équivalent )

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top