Question jQuery document.createElement équivalent?


Je suis en train de refactoriser du vieux code JavaScript et il y a beaucoup de manipulation 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 expérimenté avec:

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

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


1134
2017-11-06 12:26


origine


Réponses:


Voici votre exemple dans "une" ligne.

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

Mettre à jour: Je pensais que je mettrais à jour ce poste car il devient encore un peu de trafic. Dans les commentaires ci-dessous, il y a une discussion sur $("<div>") contre $("<div></div>") contre $(document.createElement('div')) comme un moyen de créer de nouveaux éléments, et qui est "meilleur".

J'ai mis ensemble un petit benchmark, et voici à peu près les résultats de répéter les 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 grosse surprise, mais document.createElement est la méthode la plus rapide. Bien sûr, avant de commencer à refactoriser toute votre base de code, rappelez-vous que les différences dont nous parlons ici (dans toutes les versions sauf les plus archaïques de jQuery) équivalent à environ 3 millisecondes supplémentaires. par mille éléments.

Mise à jour 2

Mis à jour pour jQuery 1.7.2 et mis le benchmark sur JSBen.ch qui est probablement un peu plus scientifique que mes benchmarks primitifs, en plus il peut être crowdsourcé maintenant!

http://jsben.ch/#/ARUtz


1199
2017-11-06 12:34



Fournir simplement le code HTML des éléments que vous souhaitez ajouter à un constructeur jQuery $() retournera un objet jQuery à partir de HTML nouvellement construit, pouvant être ajouté dans le DOM en utilisant jQuery append() méthode.

Par exemple:

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

Vous pouvez ensuite remplir cette table par programme, si vous le souhaitez.

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


123
2017-11-06 12:30



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


62
2017-07-15 07:14



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

il y a deux avantages:

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

2. beaucoup plus important est que vous puissiez souffrir d'une attaque intersite (Plus d'informations) si vous utilisez l'ancienne méthode. 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> te taquiner. Heureusement, $.parseHTML() évitez cet embarras 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 tout en b est un élément html:

a.html('123')
// [<div>​123​</div>​]
b.html('123')
// TypeError: Object [object HTMLDivElement] has no method 'html'
$(b).html('123')
// [<div>​123​</div>​]

39
2018-01-24 03:01



Je fais comme ça:

$('<div/>',{
    text: 'Div text',
    class: 'className'
}).appendTo('#parentDiv');

35
2017-11-24 18:07



Je me sens en utilisant document.createElement('div') ensemble avec jQuery est plus rapide:

$( document.createElement('div') ,{
    text: 'Div text',
    'class': 'className'
}).appendTo('#parentDiv');

34
2018-06-18 05:53



Bien que ce soit une question très ancienne, j'ai pensé que ce serait bien de la mettre à jour avec les informations récentes;

Depuis jQuery 1.8 il y a un jQuery.parseHTML () fonction qui est maintenant un moyen préféré de créer des éléments. En outre, il existe quelques 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 publication:

Analyse HTML détendue: vous pouvez à nouveau avoir des espaces de premier plan ou   newlines avant les balises dans $ (htmlString). Nous conseillons toujours fortement que   vous utilisez $ .parseHTML () lors de l'analyse de HTML obtenu à partir de sources externes   sources, et peut apporter d'autres modifications à l'analyse HTML dans le   avenir.

Pour se rapporter à la question réelle, un exemple pourrait être traduit en:

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

ce qui est malheureusement moins pratique que d'utiliser juste $(), mais il vous donne plus de contrôle, par exemple vous pouvez choisir d'exclure les balises de script (il va laisser des scripts en ligne comme onclick bien que):

> $.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 meilleure réponse ajustée à la nouvelle réalité:

JSbin Link

jQuery 1.9.1

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

Ça ressemble à parseHTML est beaucoup plus proche de createElement que $(), mais tout le boost est parti après avoir enveloppé les résultats dans un nouvel objet jQuery


25
2017-09-29 19:01



var mydiv = $('<div />') // also works

11
2017-11-17 17:03



var div = $('<div/>');
div.append('Hello World!');

Est le moyen le plus court / le plus facile de créer un élément DIV dans jQuery.


7
2017-12-22 22:43



Tout est plutôt 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
2018-05-25 17:17



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

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 un très bon rapport qualité-prix.

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

Mon plugin est plus simple, je pense que l'attr 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 plugin jQuery (le 100ème).


5
2017-08-15 14:49