javascript - img - js create element




jQuery document.createElement équivalent? (9)

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 existe une fonction jQuery.parseHTML qui est maintenant un moyen préféré de créer des éléments. De plus, il y a 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 simplifiée: vous pouvez à nouveau avoir des espaces ou des retours à la ligne avant les balises dans $ (htmlString). Nous vous recommandons fortement d'utiliser $ .parseHTML () lors de l'analyse du code HTML obtenu à partir de sources externes et d'apporter d'autres modifications à l'analyse HTML dans le futur.

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 seulement $() , mais cela vous donne plus de contrôle, par exemple vous pouvez choisir d'exclure les balises de script (cela laissera cependant des scripts inline comme onclick ):

> $.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:  64ms

Il semble que 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

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.


Fournir simplement le HTML des éléments que vous voulez ajouter à un constructeur jQuery $() renverra un objet jQuery à partir du code HTML nouvellement construit, qui peut être ajouté au DOM en utilisant la méthode append() de jQuery.

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 permet de spécifier n'importe quel code HTML arbitraire, y compris les noms de classes ou d'autres attributs, que vous pourriez trouver plus concis que d'utiliser createElement , puis de définir des attributs comme cellSpacing et className via JS.


Je fais comme ça:

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

Je pense que l'utilisation de document.createElement('div') avec jQuery est plus rapide:

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


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 );

depuis jQuery1.8 , l'utilisation de jQuery.parseHTML pour créer des éléments est un meilleur choix.

il y a deux avantages:

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. Une chose beaucoup plus importante est que vous pourriez souffrir d'attaques croisées ( plus d'infos ) 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> pour vous taquiner. heureusement, $.parseHTML() évite 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, notez que 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>​]

jQuery out of the box n'a pas l'équivalent d'un createElement. En fait, la majorité du travail de jQuery se fait en interne en utilisant innerHTML plutôt que sur une manipulation purement DOM. Comme Adam l'a mentionné plus haut, voici comment vous pouvez obtenir des résultats similaires.

Il y a aussi des plugins disponibles qui utilisent le DOM sur appendDOM comme appendDOM , DOMEC et FlyDOM pour n'en nommer que quelques-uns. Performance sage la jquery native est toujours la plus performante (principalement parce qu'elle utilise innerHTML)


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




dhtml