javascript - objet - jquery remplacer contenu div




Création d'un élément div dans jQuery (18)

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

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



Créer une DIV en mémoire

$("<div/>");

Ajoutez des gestionnaires de clic, des styles etc - et enfin insérez 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 d'ian, mais je n'ai trouvé aucun exemple qui traite correctement l'utilisation des méthodes dans la déclaration de l'objet properties, alors voilà.


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

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

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

Ajoute maintenant HTML à ce test div ajouté:

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

Je viens de faire un petit plugin jQuery pour ça.

Il suit votre syntaxe:

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

L' ID de noeud DOM peut être spécifié en tant que deuxième paramètre:

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

Est ce sérieux? Non. Mais cette syntaxe est meilleure que $ ("<div> </ div>") , et c'est une très bonne valeur pour cet argent.

(Réponse partiellement copiée de: jQuery document.createElement équivalent? )


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

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

ou

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

Cela donne le même résultat.


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 cela en combinaison avec les autres réponses pour réellement faire quelque chose d'utile avec lui (comme l'utilisation de la méthode append() ou similaire).

La documentation de manipulation vous donne toutes les différentes options sur comment ajouter de nouveaux éléments.


Une courte façon de créer div est

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

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


Utilisation:

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

Je pense que ça aidera.


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

ELEMENT CLONING

Supposons que vous ayez 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 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>


Vous pouvez créer des tags séparés à l'aide de la méthode .jquery() . Et créez des balises enfant en utilisant la méthode .append() . Comme jQuery prend en charge le chaînage, vous pouvez également appliquer le CSS de deux manières. .attr() 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 list à ma balise div et j'y insère des données JSON. Ensuite, je crée une balise enfant de la liste, à condition d'avoir un attribut. J'ai assigné la valeur à une variable, de sorte qu'il serait facile pour moi de l'ajouter.


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 .html() ou .add() comme mentionné dans une réponse différente .


alternativement à append () vous pouvez aussi utiliser appendTo() qui a une syntaxe différente:

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

$(HTMLelement) peut le réussir. Si vous voulez un div epmty, utilisez-le comme $('<div></div>'); . Vous pouvez également définir les autres éléments par la même méthode. Si vous voulez changer le HTML interne après avoir créé, vous pouvez utiliser la méthode html() . Pour obtenir outerHTML en tant que chaîne, vous pouvez utiliser 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;

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 à la 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 maintenant vous allez immédiatement append() quelque chose au corps. Mais c'est une question de goût, comme toujours lors de l'écriture de code ou de texte.

En général, utilisez le code HTML le moins possible dans le code JQuery, puisqu'il s'agit principalement de code spaghetti. Il est sujet à erreur et difficile à maintenir, car le HTML-String 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.


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

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


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

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

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

document.createElement('div');






jquery-append