jQuery document.createElement equivalent?

Je refactionne un vieux code JavaScript et il y a beaucoup de manipulations DOM en cours.

var d = document;
var odv = d.createElement("div");
odv.style.display = "none";
this.OuterDiv = odv;

var t = d.createElement("table");
t.cellSpacing = 0;
t.className = "text";
odv.appendChild(t);

je voudrais savoir s'il y a une meilleure façon de le faire en utilisant jQuery. J'ai fait des expériences avec:

var odv = $.create("div");
$.append(odv);
// And many more

mais je ne suis pas sûr que ce soit mieux.

1156
demandé sur John Slegers 2008-11-06 15:26:31
la source

13 ответов

voici votre exemple, "un".

this.$OuterDiv = $('<div></div>')
    .hide()
    .append($('<table></table>')
        .attr({ cellSpacing : 0 })
        .addClass("text")
    )
;

Maj : j'ai pensé mettre à jour ce post car il reçoit encore un peu de trafic. Dans les commentaires ci-dessous, il y a une discussion sur $("<div>") vs $("<div></div>") vs $(document.createElement('div')) comme une façon de créer de nouveaux éléments, et qui est "meilleur".

j'ai mis en place un petit benchmark , et voici à peu près le résultats de la répétition des options ci-dessus 100.000 fois:

jQuery 1.4, 1.5, 1.6

               Chrome 11  Firefox 4   IE9
<div>            440ms      640ms    460ms
<div></div>      420ms      650ms    480ms
createElement    100ms      180ms    300ms

jQuery 1.3

                Chrome 11
<div>             770ms
<div></div>      3800ms
createElement     100ms

jQuery 1.2

                Chrome 11
<div>            3500ms
<div></div>      3500ms
createElement     100ms

je pense que ce n'est pas une grande surprise, mais document.createElement est la méthode la plus rapide. Bien sûr, avant de partir et de commencer à reconfigurer toute votre base de données, rappelez-vous que le les différences dont nous parlons ici (dans toutes les versions sauf archaïques de jQuery) équivalent à environ 3 millisecondes supplémentaires pour mille éléments .

mise à jour 2

mis à jour pour jQuery 1.7.2 et mettre le benchmark sur JSBen.ch qui est probablement un peu plus scientifique que mes repères primitifs, et il peut être crowdsourced maintenant!

http://jsben.ch/#/ARUtz

1216
répondu nickf 2016-12-19 18:36:28
la source

simplement en fournissant le HTML des éléments que vous voulez ajouter à un constructeur jQuery $() retournera un objet jQuery à partir de HTML nouvellement construit, adapté pour être ajouté dans le DOM en utilisant la méthode append() de jQuery.

par exemple:

var t = $("<table cellspacing='0' class='text'></table>");
$.append(t);

vous pourriez alors peupler cette table programmatically, si vous le souhaitez.

cela vous donne la possibilité de spécifier n'importe quel HTML arbitraire que vous aimez, y compris la classe noms ou autres attributs, que vous pourriez trouver plus concis que d'utiliser createElement et de définir ensuite des attributs comme cellSpacing et className via JS.

125
répondu Adam Bellaire 2009-12-15 02:28:33
la source

la création de nouveaux éléments DOM est une caractéristique essentielle de la méthode jQuery() , voir:

65
répondu abernier 2018-04-06 20:34:58
la source

depuis jQuery1.8 , en utilisant $.parseHTML() pour créer des éléments est un meilleur choix.

il y a deux avantages:

1.si vous utilisez l'ancienne façon, qui peut être quelque chose comme $(string) , jQuery examinera la chaîne pour s'assurer que vous voulez sélectionner une étiquette html ou créer un nouvel élément. En utilisant $.parseHTML() , vous dites à jQuery que vous voulez créer un nouvel élément explicitement, de sorte que la performance peut être un peu mieux.

2.beaucoup plus important est que vous pouvez souffrir d'attaque de site croisé ( plus d'informations ) si vous utilisez l'ancienne façon. si vous avez quelque chose comme:

    var userInput = window.prompt("please enter selector");
    $(userInput).hide();

un méchant peut entrer <script src="xss-attach.js"></script> pour vous taquiner. heureusement, $.parseHTML() éviter cette gêne pour vous:

var a = $('<div>')
// a is [<div>​</div>​]
var b = $.parseHTML('<div>')
// b is [<div>​</div>​]
$('<script src="xss-attach.js"></script>')
// jQuery returns [<script src=​"xss-attach.js">​</script>​]
$.parseHTML('<script src="xss-attach.js"></script>')
// jQuery returns []

cependant, veuillez noter que a est un objet jQuery tandis que b est un html élément:

a.html('123')
// [<div>​123​</div>​]
b.html('123')
// TypeError: Object [object HTMLDivElement] has no method 'html'
$(b).html('123')
// [<div>​123​</div>​]
39
répondu Brian 2013-01-24 07:01:28
la source

je fais comme ça:

$('<div/>',{
    text: 'Div text',
    class: 'className'
}).appendTo('#parentDiv');
38
répondu kami 2017-05-24 20:49:01
la source

mise à JOUR

à partir des dernières versions de jQuery, la méthode suivante n'attribue pas de propriétés passées dans le second objet

précédente réponse

je me sens utiliser document.createElement('div') avec jQuery est plus rapide:

$(document.createElement('div'), {
    text: 'Div text',
    'class': 'className'
}).appendTo('#parentDiv');
35
répondu Om Shankar 2018-10-04 02:48:10
la source

bien qu'il s'agisse d'une question très ancienne, j'ai pensé qu'il serait bon de la mettre à jour avec les informations récentes;

depuis jquery 1.8 il y a un jQuery.parseHTML () fonction qui est maintenant une façon préférée de créer des éléments. En outre, il ya certains problèmes avec l'analyse HTML via $('(html code goes here)') , par exemple, le site officiel de jQuery mentionne ce qui suit dans une de leurs notes de version :

parsing HTML détendu: vous pouvez une fois de plus avoir des espaces de tête ou newlines avant les tags en $(htmlString). Nous vous conseillons vivement que vous utilisez $.parseHTML () lors de l'analyse de HTML obtenu à partir de sources, et peut faire d'autres changements à l'analyse HTML dans le avenir.

rapporter À la question réelle, à condition d'exemple pourrait être traduit:

this.$OuterDiv = $($.parseHTML('<div></div>'))
    .hide()
    .append($($.parseHTML('<table></table>'))
        .attr({ cellSpacing : 0 })
        .addClass("text")
    )
;

qui est malheureusement moins commode que en utilisant juste $() , mais il vous donne plus de contrôle, par exemple, vous pouvez choisir d'exclure les balises de script (il laissera les scripts en ligne comme onclick si):

> $.parseHTML('<div onclick="a"></div><script></script>')
[<div onclick=​"a">​</div>​]

> $.parseHTML('<div onclick="a"></div><script></script>', document, true)
[<div onclick=​"a">​</div>​, <script>​</script>​]

aussi, voici un benchmark de la réponse supérieure ajustée à la nouvelle réalité:

JSbin Lien

jQuery 1.9.1

  $.parseHTML:    88ms
  $($.parseHTML): 240ms
  <div></div>:    138ms
  <div>:          143ms
  createElement:  64ms

on dirait que parseHTML c'est beaucoup plus proche de createElement que de $() , mais tout le boost est parti après avoir enveloppé les résultats dans un nouvel objet jQuery

27
répondu siergiej 2014-01-02 22:07:51
la source
var mydiv = $('<div />') // also works
11
répondu Shimon Doodkin 2010-11-17 20:03:38
la source
var div = $('<div/>');
div.append('Hello World!');

est la façon la plus courte/facile de créer un élément DIV en jQuery.

7
répondu AcidicChip 2010-12-23 01:43:07
la source

C'est assez simple! Heres quelques exemples rapides...


var $example = $( XMLDocRoot );

var $element = $( $example[0].createElement('tag') );
// Note the [0], which is the root

$element.attr({
id: '1',
hello: 'world'
});

var $example.find('parent > child').append( $element );
5
répondu Randy 2011-08-14 20:30:46
la source

je viens de faire un petit plugin jQuery pour ça: https://github.com/ern0/jquery.create

il suit votre syntaxe:

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

DOM node ID peut être spécifié comme second paramètre:

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

c'est grave? Aucun. Mais cette syntaxe est mieux que $("

") , et c'est une très bonne valeur pour leur argent.

je suis un nouvel utilisateur de jQuery, commutation de DOMAssistant, qui a une fonction similaire: http://www.domassistant.com/documentation/DOMAssistantContent-module.php

mon plugin est plus simple, je pense attrs et le contenu est mieux à ajouter par les méthodes de chaînage:

$("#container").append( $.create("div").addClass("box").html("Hello, world!") );

Aussi, c'est un bon exemple pour un simple jQuery-plugin (100e).

5
répondu ern0 2013-08-15 18:49:30
la source

il semble que la création d'éléments ne vous mènera qu'à bien. Une fois que vous commencez à enchaîner, la différence de performance est négligeable.

http://jsperf.com/jquery-dom-node-creation

est-ce que je manque quelque chose?

0
répondu LukeAskew 2013-02-28 03:59:14
la source

jQuery hors de la boîte n'a pas l'équivalent d'un createElement. En fait, la majorité du travail de jQuery est fait en interne en utilisant innerHTML plutôt que pure manipulation DOM. Comme Adam mentionné ci-dessus c'est comment vous pouvez obtenir des résultats similaires.

il y a aussi des plugins disponibles qui utilisent le DOM sur innerHTML comme appendDOM , DOMEC et FlyDOM pour n'en nommer que quelques-uns. Le jquery natif est toujours le plus performant (principalement parce qu'il utilise innerHTML)

-1
répondu James Hughes 2008-11-06 15:35:57
la source

Autres questions sur javascript jquery dom html dhtml