Ajout de la chaîne HTML pour les DOM
Comment faire pour ajouter cette chaîne HTML
var str = '<p>Just some <span>text</span> here</p>';
à la DIV avec l'ID 'test'
qui est dans les DOM?
(Btw div.innerHTML += str;
n'est pas acceptable.)
Vous devez vous connecter pour publier un commentaire.
Utilisation
insertAdjacentHTML
si elle est disponible, sinon utiliser une sorte de repli. insertAdjacentHTML est pris en charge dans tous les navigateurs actuels.Démo Live: http://jsfiddle.net/euQ5n/
innerHTML
met la chaîne dans l'élément (en remplacement de tous les enfants), alors queinsertAdjacentHTML
met (1) avant l'élément (2) après que l'élément (3) à l'intérieur de l'élément avant que le premier enfant, ou (4) à l'intérieur de l'élément après le dernier enfant.innerHTML
, parce queinsertAdjacentHTML
n'est pas sérialiser et d'analyse de l'existant, les enfants de l'élément.insertAdjacentHTML
maintient les valeurs de l'altération de la forme des éléments, tandis que l'ajout deinnerHTML
reconstruit l'élément et perd toute forme de contexte.Est-ce acceptable?
jsFiddle.
Mais, Neil réponse est une meilleure solution.
innerHTML
?insertAdjacentHTML
.^_^
str
a un seul élément de niveau supérieur.L'idée est d'utiliser
innerHTML
sur un intermédiaire de l'élément, puis déplacez l'ensemble de ses nœuds enfants à l'endroit où vous les voulez vraiment viaappendChild
.Cela évite de l'anéantissement de tous les gestionnaires d'événements sur
div#test
mais encore vous permet d'ajouter une chaîne de HTML.Voici quelques test de performance:
Configurer l'environnement (2019.07.10) MacOs High Sierra 10.13.4 sur Chrome 75.0.3770 (64-bit), Safari 11.1.0 (13604.5.6), Firefox 67.0.0 (64-bit)
Résumé
AppendChild
(E) est plus de 2x plus rapide que les autres solutions sur chrome et safari,insertAdjacentHTML
(F) est le plus rapide sur firefox. LeinnerHTML=
(B) (ne pas confondre avec+=
) est la deuxième solution rapide sur tous les navigateurs et il est beaucoup plus pratique que de E et F. Vous pouvez lire les test dans votre machine iciJS:
HTML:
La bonne façon est d'utiliser
insertAdjacentHTML
. Dans Firefox antérieures à 8, vous pouvez revenir à l'utilisation d'Range.createContextualFragment
si votrestr
contient pas descript
balises.Si votre
str
contientscript
balises, vous devez supprimerscript
éléments à partir du fragment retourné parcreateContextualFragment
avant l'insertion du fragment. Sinon, le script sera exécuté. (insertAdjacentHTML
marques de scripts unexecutable.)createContextualFragment
. Je cherchais un moyen de faire quelques html inclut avec les scripts s'exécutent que si l'utilisateur s'engage à mettre en place un cookie.Pourquoi n'est-ce pas acceptable?
document.getElementById('test').innerHTML += str
serait le manuel du cours moyen de le faire.
#test
bien. Qui n'est généralement pas souhaitable.Rapide Hack:
Cas D'Utilisation:
1: Enregistrer sous .html fichier et de l'exécuter dans le navigateur chrome ou firefox ou edge. (C'est à dire l'habitude de travailler)
2: Utilisation dans des http://js.do
En Action:
http://js.do/HeavyMetalCookies/quick_hack
Cassé vers le bas avec les commentaires:
Raison pour laquelle j'ai posté le:
JS.ne a deux indispensables:
Mais ne pas afficher la console.les messages du journal.
Est venu ici à la recherche d'une solution rapide.
Je veux juste voir les résultats de
quelques lignes de pavé de code, la
d'autres solutions sont beaucoup trop de travail.
Cela peut résoudre
InnerHTML effacer toutes les données comme les événements de nœuds existants
ajouter de l'enfant avec firstChild ajoute seulement premier enfant à innerHTML. Par exemple, si nous devons ajouter:
seulement texte1 apparaîtra
Quoi à ce sujet:
ajoute tag spécial à innerHTML par ajouter de l'enfant et ensuite modifier outerHTML par la suppression de la balise que nous avons créés. Ne sais pas comment intelligent qu'il est, mais il fonctionne pour moi
ou vous pourriez changer d'outerHTML de innerHTML pour ne pas utiliser la fonction remplacer
JS:
HTML: