jQuery document.createElement équivalent ?

Question

Je suis refactorisation du code JavaScript vieux et il y a beaucoup de manipulation du DOM en cours.

Je voudrais savoir s’il y a une meilleure façon de le faire à l’aide de jQuery. J’ai fait des expériences avec :

Mais je ne sais pas si c’est mieux.

Answer 1

voici votre exemple, "un".

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

---

Mise à jour: j'ai pensé que je mettrais à jour ce post car il est encore tout à fait un peu de trafic. Dans les commentaires ci-dessous il y a une discussion à propos de $("<div>") vs $("<div></div>") vs $(document.createElement('div')) comme un moyen de créer de nouveaux éléments, et qui est "meilleur".

J'ai mis en place un petit test, et voici à peu près les résultats de répéter les options ci-dessus de 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 c'est pas une grande surprise, mais document.createElement est la méthode la plus rapide. Bien sûr, avant de vous rendre et de commencer à refactoring l'ensemble de votre base de code, n'oubliez pas que les différences dont nous parlons ici (dans tous, mais le archaïque versions de jQuery) équivalent à environ un supplément de 3 millisecondes pour mille éléments.

Mise à jour 2

Mise à jour de jQuery 1.7.2 et de mettre l'indice de référence sur JSPerf qui est probablement un peu plus scientifique que mon primitive de repères, plus il peut être découvrir dès maintenant!

http://jsperf.com/jquery-vs-createelement

Answer 2

De la simple fourniture de l'HTML des éléments que vous souhaitez ajouter à un jQuery constructeur $() retournera un objet jQuery à partir nouvellement construit HTML, adapté pour être ajouté dans les DOM à l'aide de jQuery append() méthode.

Par exemple:

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

Vous pouvez ensuite remplir cette table par programmation, si vous l'avez souhaité.

Cela vous donne la possibilité de spécifier n'importe quel code HTML, y compris les noms de classe ou d'autres attributs, vous pouvez trouver plus concis que l'utilisation d' createElement puis à la définition des attributs comme cellSpacing et className via JS.

Answer 3

La création de nouveaux éléments DOM est une fonctionnalité de base de la `` méthode, voir :

• http://API.jQuery.com/jQuery/#Creating-New-Elements
• et particulièrement http://api.jquery.com/jQuery/#example-1-1

A bientôt.

Answer 4

depuis jQuery1.8, à l'aide de $.parseHTML() pour créer des éléments est un meilleur choix.

il y a deux avantages:

1.si vous utilisez l'ancienne manière, ce qui peut être quelque chose comme $(string), jQuery examinera la chaîne assurez-vous que vous souhaitez sélectionner une balise html ou créer un nouvel élément. En utilisant $.parseHTML(), vous dites jQuery que vous souhaitez créer un nouvel élément explicitement, de sorte que la performance peut être un peu mieux.

2.beaucoup plus important, c'est que vous pouvez souffrir de la croix-attaque du site (plus d'info) si vous utilisez l'ancienne. si vous avez quelque chose comme:

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

un mauvais gars peut entrée <script src="xss-attach.js"></script> vous taquiner. heureusement, $.parseHTML() éviter 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 qu' a est un objet jQuery alors que 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>​]

Answer 5

Je me sens à l’aide de avec est plus rapide :