web-dev-qa-db-fra.com

jQuery document.createElement équivalent?

Je suis en train de refacturer un ancien 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);

J'aimerais savoir s'il existe un meilleur moyen de faire cela 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.

javascriptjqueryhtmldomdhtml
1208
Rob Stevenson-Leggett

voici votre exemple dans "une" ligne.

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

Update : Je pensais mettre à jour ce message car il génère encore pas mal de trafic. Dans les commentaires ci-dessous, il est question de $("<div>") vs $("<div></div>") vs $(document.createElement('div')) comme moyen de créer de nouveaux éléments, et qui correspond au "meilleur".

Je mets ensemble n petit repère , 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 surprise, mais document.createElement est la méthode la plus rapide. Bien sûr, avant de commencer à refactoriser l'ensemble de votre base de code, rappelez-vous que les différences dont nous parlons ici (dans toutes les versions sauf archaïque de jQuery) équivalent à environ 3 millisecondes supplémentaires pour mille éléments.

Mise à jour 2

Mis à jour pour jQuery 1.7.2 et mis la référence sur JSBen.ch, qui est probablement un peu plus scientifique que mes références primitives, en plus, il peut être crowdsourced maintenant!

http://jsben.ch/#/ARUtz

1259
nickf

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

Par exemple:

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

Vous pouvez ensuite renseigner cette table par programmation, si vous le souhaitez.

Cela vous donne la possibilité de spécifier le code HTML de votre choix, y compris les noms de classe ou d’autres attributs, que vous pourriez trouver plus concis que d’utiliser createElement, puis de définir des attributs tels que cellSpacing et className via JS.

133
Adam Bellaire

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

68
abernier

Je fais comme ça:

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

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

il y a deux avantages:

1.si vous utilisez l'ancienne méthode, qui peut ressembler à $(string), jQuery examinera la chaîne pour vous assurer que vous souhaitez sélectionner une balise html ou créer un nouvel élément. En utilisant $.parseHTML(), vous indiquez à jQuery que vous souhaitez créer un nouvel élément de manière explicite, afin que les performances puissent être un peu meilleures.

2.Le plus important est que vous puissiez subir une attaque entre sites ( plus d'informations ) si vous utilisiez 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 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, 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>​]
42
Brian

UPDATE

Dans les dernières versions de jQuery, la méthode suivante n'affecte pas les propriétés transmises dans le deuxième objet.

Réponse précédente

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

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

Bien qu’il s’agisse d’une question très ancienne, j’ai pensé qu’il 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 privilégié 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 Web officiel de jQuery mentionne ce qui suit dans l'une de leurs notes de publication :

Analyse HTML détendue: Vous pouvez à nouveau avoir des espaces ou des nouvelles lignes avant les balises dans $ (htmlString). Nous vous conseillons néanmoins vivement d’utiliser $ .parseHTML () lors de l’analyse HTML obtenue à partir de sources externes et d’apporter éventuellement des modifications supplémentaires à l’analyse HTML.

Pour se rapporter à la question réelle, l'exemple fourni 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 simplement $(), mais cela vous donne plus de contrôle, par exemple, vous pouvez choisir d'exclure les balises de script (cela laissera des scripts intégrés tels que 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>​]

En outre, voici un point de repère de la réponse principale adaptée à la nouvelle réalité:

lien JSbin

jQuery 1.9.1 

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

Il semble que parseHTML soit beaucoup plus proche de createElement que $(), mais toute accélération a disparu après avoir enveloppé les résultats dans un nouvel objet jQuery

28
siergiej
var mydiv = $('<div />') // also works
12
Shimon Doodkin
var div = $('<div/>');
div.append('Hello World!');

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

7
AcidicChip

Je viens de créer un petit plugin jQuery pour cela: https://github.com/ern0/jquery.create

Il suit votre syntaxe:

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

L'ID de nœud 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 le rapport qualité-prix est très bon.

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

Mon plugin est plus simple, je pense qu’il est préférable d’ajouter du contenu et des contenus en chaînant des méthodes:

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

C'est aussi un bon exemple pour un simple plugin jQuery (le 100ème).

5
ern0

C'est tout simple! Voici 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
Randy

Non mentionné dans les réponses précédentes, j'ajoute donc un exemple de travail sur la création d'éléments avec la dernière version de jQuery, ainsi que des attributs supplémentaires tels que content, class ou callback onclick:

const mountpoint = 'https://jsonplaceholder.typicode.com/users'

const $button = $('button')
const $tbody = $('tbody')

const loadAndRender = () => {
  $.getJSON(mountpoint).then(data => {

    $.each(data, (index, { id, username, name, email }) => {
      let row = $('<tr>')
        .append($('<td>', { text: id }))
        .append($('<td>', {
          text: username,
          class: 'click-me',
          on: {
            click: _ => {
              console.log(name)
            }
          }
        }))
        .append($('<td>', { text: email }))

      $tbody.append(row)
    })

  })
}

$button.on('click', loadAndRender)
.click-me {
  background-color: lightgrey
}
<table style="width: 100%">
  <thead>
    <tr>
      <th>ID</th>
      <th>Username</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
  
  </tbody>
</table>

<button>Load and render</button>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
0
Vladislav Ladicky