J'ai un div vide identifié par "parent". Je veux mettre un élément p à l'intérieur. Il existe deux méthodes:

Première méthode:

parent.innerHTML = "";
parent.innerHTML = "<p>My dummy text</p>";

Deuxième méthode:

var myP = document.createElement('p');
var myText = document.createTextNode("My dummy text here");
myP.appendChild(myText);
parent.appendChild(myP);

Y a-t-il une différence entre les deux méthodes en ce qui concerne les bonnes pratiques?

Merci!

3
TGM 31 oct. 2011 à 20:42

7 réponses

Meilleure réponse

Lorsque vous avez l'intention d'ajouter du texte brut (pas d'écouteurs d'événements), aucune valeur d'attribut complexe, innerHTML est généralement une bonne option.

Si le texte ne contient aucune balise HTML, textContent ou innerText (IE) est un meilleur choix, car la définition de ces propriétés n'entraînera pas l'analyse de la chaîne au format HTML.

Des tonnes de document.createElement et appendChild sont généralement plus lentes que la définition de la propriété innerHTML, en particulier lorsque vous comparez 1000x append-to-body vs 1x .innerHTML.

Il est recommandé d'utiliser appendChild lorsque vous souhaitez étendre un élément dont le contenu est inconnu (il peut contenir des écouteurs d'événements ou des éléments d'entrée modifiés par l'utilisateur).

3
Rob W 31 oct. 2011 à 16:49

La seule différence que je vois, c'est lorsque vous utilisez des entrées. Certains navigateurs ne reconnaissent pas que de nouvelles entrées ont été ajoutées à un formulaire et, lorsqu'elles sont soumises, n'incluent pas ces entrées.

Lorsque vous utilisez appendChild, ce problème ne se produit pas. C'est donc une bonne pratique de manipuler le DOM et de l'ajouter correctement.

Si vous pensez que c'est trop de travail, créez chaque élément et ajoutez-le, vous pouvez envisager d'utiliser un cadre pour le rendre plus rapide. jQuery, par exemple, vous permet d'utiliser $(parent).html("<p>My dummy text here</p>") et de créer automatiquement des nœuds pour vous.

-2
JJJ 31 oct. 2011 à 16:51

.innerHTML est le diable. Nous ne l'utilisons pas.

Nous utilisons les méthodes DOM parce que nous ne devrions pas pirater avec des morceaux de JavaScript en ligne.

Les seuls cas d'utilisation valides pour .innerHTML sont les hacks de conformité multi-navigateurs et les moteurs de modèles.

Si vous ne faites rien de tout cela, vous êtes censé utiliser DOM4.

1
Raynos 31 oct. 2011 à 17:07

De doc GWT UiBinder:

"Les navigateurs sont meilleurs pour construire des structures DOM en entassant de grandes chaînes de HTML en attributs innerHTML que par un tas d'appels d'API."

Je pense qu'ils savent de quoi ils parlent dans ce cas.

Donc, à part le fait qu'il ne s'ajoute pas comme Rob Mayoff l'a mentionné dans le commentaire, il est probablement plus rapide d'utiliser innerHTML, en particulier pour les cas moins triviaux.

-1
Andreas 31 oct. 2011 à 16:47

La première approche peut introduire des trous XSS, si vous ne faites pas attention. L'utiliser avec des chaînes constantes comme dans votre exemple est sûr, mais tenez compte des points suivants:

parent.innerHtml = "<p>" + document.getElementById('userInput').value + "</p>";

Vous venez d'injecter une entrée utilisateur directement dans votre DOM. Si cette entrée contient une balise de script, alors vous venez d'être XSS'd. Ceci est un exemple artificiel, mais vous pouvez imaginer comment vous pourriez accidentellement générer une chaîne à partir d'une entrée utilisateur non échappée côté serveur et l'écrire dans votre DOM.

1
Annabelle 31 oct. 2011 à 16:52

La 1ère option peut supprimer tous les écouteurs d'événements que vous pourriez avoir sur cette partie du DOM
Alors que la deuxième option ne le sera pas.

Mieux vaut aller avec l'option # 2.

2
Naftali aka Neal 31 oct. 2011 à 16:46

Voici quelques différences:

MAUVAIS

  • Ce n'est pas une norme. C'est une propriété exclusive que Microsoft a introduite (avec le moins populaire en HTML externe) que les autres fabricants de navigateurs ont repris.
  • Comme ce n'est pas une norme, il n'est pas censé fonctionner sous le type MIME application / xhtml + xml sous lequel les documents XHTML sont censés être servis. (Firefox 1.5 a changé cela en l'autorisant pour une raison quelconque)
  • InnerHTML est une chaîne. Le DOM n'est pas une chaîne, c'est une structure d'objet hiérarchique.
  • Cela crée du code presque illisible dans de nombreux cas, avec des guillemets d'échappement et des signes plus partout ajoutant des données à la chaîne.

BON

  • C'est plus rapide que les méthodes DOM. Par beaucoup.

  • C'est moins verbeux que les méthodes DOM.

  • Il vous permet de prendre des morceaux de balisage arbitraires et de les déposer dans un document sans avoir à les analyser.
1
Matteo Vinci 31 oct. 2011 à 16:51