J'essaie d'apprendre JS sans utiliser de framework. Juste un petit doute avec ce qui suit :

<div class="js-button"></div>

Dans jQuery, je peux créer un bouton d'envoi avec :

$("<button type='submit'>Save</button>").appendTo($(".js-button"));

En clair JS je pourrais faire:

document.querySelector(".js-button").innerHTML += "<button type='submit'>Save</button>";

C'est exactement la même chose, non ? Y a-t-il d'autres façons de le faire? Si vous faites l'erreur d'écrire = au lieu de +=, vous pouvez vous attendre à de gros problèmes que j'essaie d'éviter.

4
Dirk J. Faber 14 mars 2019 à 20:20

2 réponses

Meilleure réponse

C'est exactement la même chose, non ?

Non, pas du tout, même s'il est facile de comprendre pourquoi vous pensez cela. Il n'est presque jamais correct d'utiliser += avec innerHTML. Cela force le navigateur à :

  • Faites défiler le contenu de l'élément en créant une chaîne HTML
  • Ajoutez votre chaîne à cette chaîne
  • Détruire tout le contenu de l'élément
  • Analyser la chaîne pour créer de nouveaux contenus, en les mettant dans l'élément

... qui, en plus d'être un peu de travail inutile, perd également les gestionnaires d'événements, l'état coché des cases à cocher/boutons radio, les options sélectionnées dans les éléments select, etc.

Utilisez plutôt insertAdjacentHTML ou createElement/createTextNode et appendChild. Voir le DOM sur MDN. Dans cet exemple précis :

document.querySelector(".js-button").insertAdjacentHTML(
    "beforeend",
    "<button type='submit'>Save</button>"
);
<div class="js-button"></div>
6
T.J. Crowder 14 mars 2019 à 17:31

Je voudrais juste démontrer les différences entre l'utilisation de += avec innerHTML et = avec innerHTML, et répondre à la question :

Si vous faites l'erreur d'écrire = au lieu de +=, vous pouvez vous attendre à de gros problèmes que j'essaie d'éviter.

InterneHTML +=

Lors de l'utilisation de += avec innerHTML et de l'ajout de 2000 éléments à un div, le rendu prend environ 4 secondes.

let div = document.querySelector('div')
console.time('append innerHTML')
for(let i = 0; i < 2000; i++){
  div.innerHTML += '<p>Hello</p>'
}

console.timeEnd('append innerHTML')
<div></div>

InterneHTML =

Lors de la construction d'une chaîne et de l'utilisation de innerHTML = à la place, nous pouvons faire plus du double de la quantité de travail en 75+% moins de temps en créant d'abord la chaîne, puis en l'attribuant à innerHTML.

Ici, nous avons utilisé 10 000 éléments au lieu de 2 000 éléments (comme vu ci-dessus), et nous remarquons également une énorme amélioration de la vitesse, un rendu presque instantané.

let div = document.querySelector('div')
console.time('append str')
let str = ''
for(let i = 0; i < 10000; i++){
  str += '<p>Hello</p>'
}

div.innerHTML = str
console.timeEnd('append str')
<div></div>

La raison pour laquelle le deuxième exemple est plus rapide est qu'il n'a à mettre à jour le DOM qu'une seule fois au lieu de 2 000 ou 10 000 fois. Chaque mise à jour entraîne un retard, et à mesure que le dom grandit, le retard augmente également.

1
Get Off My Lawn 14 mars 2019 à 17:43