La manière privilégiée de créer un nouvel élément avec jQuery

La première option vous donne plus de flexibilité:

 var $div = $("<div>", {id: "foo", "class": "a"}); $div.click(function(){ /* ... */ }); $("#box").append($div); 

.append('*')

Une autre bonne pratique consiste à préfixer vos variables jQuery avec $ :
Y a-t-il une raison spécifique derrière l'utilisation de $ avec variable dans jQuery

Le fait de placer des citations autour du nom de la propriété "class" le rendra plus compatible avec les navigateurs moins flexibles.

Personnellement, je pense qu'il est plus important que le code soit lisible et éditable comme interprète. Quelle que vous trouviez plus facile à regarder et ce devrait être celui que vous choisissez pour les facteurs ci-dessus. Vous pouvez l'écrire comme suit:

 $('#box').append( $('<div/>') .attr("id", "newDiv1") .addClass("newDiv purple bloated") .append("<span/>") .text("hello world") ); 

Et votre première méthode comme suit:

 // create an element with an object literal, defining properties var $e = $("<div>", {id: "newDiv1", name: 'test', class: "aClass"}); $e.click(function(){ /* ... */ }); // add the element to the body $("#box").append($e); 

Mais en ce qui concerne la lisibilité; L'approche jQuery est mon préféré . Suivez ces astuces jQuery utiles, notes et meilleures pratiques

D'une manière beaucoup plus expressive,

 jQuery('<div/>', { "id": 'foo', "name": 'mainDiv', "class": 'wrapper', "click": function() { jQuery(this).toggleClass("test"); }}).appendTo('selector'); 

Référence: Docs

Selon la documentation officielle de jQuery

Pour créer un élément HTML, $("<div/>") ou $("<div></div>") est préféré.

Ensuite, vous pouvez utiliser soit appendTo , append , before , after and etc ,. Pour insérer le nouvel élément dans le DOM.

PS: jQuery Version 1.11.x

Si #box est vide, rien, mais s'il ne s'agit pas de choses très différentes. Le premier ajoutera un div comme dernier nœud enfant de #box . Ce dernier remplace complètement le contenu de #box par un seul div vide, le texte et tous.

J'ai une nouvelle idée, en utilisant .html(content)

Vous pouvez placer un <div></div> vide précédemment à l'endroit souhaité, n'oubliez pas de définir une ID pour cette DIV.

Ensuite, utilisez $("#divId").html(content) pour remplacer le DIV vide avec votre nouveau contenu, qui est le DIV que vous souhaitez ajouter.

Je recommande la première option, où vous créez des éléments en utilisant jQuery. La deuxième approche définit simplement la propriété innerHTML de l'élément dans une chaîne, qui se révèle être HTML, et est plus propice aux erreurs et moins flexible.

Supposons que nous ayons un scénario pour remplacer le contenu de manière dynamique par des étiquettes html, nous ne pouvons pas utiliser $ ('# id'). Text (); Car il n'acceptera pas le texte avec format HTML formaté comme un texte en gras afin d'obtenir cela, nous devons utiliser la méthode jQuery append, mais comme alternative à la méthode .text (), juste vide chaque fois que nous devons mettre à jour et utiliser la méthode Append.

  var fileImportStatus; $('#id').change(function(){ if($('#id').is(':checked')){ fileImportStatus = "<strong>ON</strong>"; }else { fileImportStatus = "<strong>OFF</strong>"; } }); $('#saveBtn').click(function(){ $('#fileImportStatusTxt').empty(); $('#fileImportStatusTxt').append('File Import is ' + fileImportStatus); }); 

Il est également possible de créer un élément div de la manière suivante:
var my_div = document.createElement('div');
Ajouter classe
my_div.classList.add('col-10');
Peut également exécuter append () et appendChild ()