La propriété extérieure en javascript

Parfois, les développeurs doivent remplacer le code source d'un élément par du texte formaté HTML ou accéder au code source d'un élément lors de l'exécution. À cette fin, utilisez la propriété extérieure qui est similaire à l'élément.innerhtml. La principale différence entre ces deux propriétés est qu'interhtml accède au contenu en texte brut d'un élément sans balises HTML, tandis que la propriété extérieure doit être utilisée si vous avez besoin de balises HTML.

Cette étude expliquera la propriété OUTERHTML en JavaScript.

Quelle est la propriété extérieure en javascript?

Le "extérieur»Est la propriété JavaScript de l'interface DOM qui fournit le composant HTML de l'élément. Avec le texte, il comprend également la structure HTML complète de l'élément, y compris ses balises d'ouverture et de fermeture. De plus, en utilisant la propriété OUTERHTML, vous pouvez accéder ou modifier la structure HTML de l'élément.

Comment utiliser la propriété extérieure en javascript?

Suivez la syntaxe donnée pour obtenir le contenu HTML à l'aide de la propriété OUTERHTML:

élément.extérieur

La syntaxe suivante est utilisée pour définir le contenu HTML à l'aide de la propriété OUTERHTML:

élément.OUTERHTML = HTMLSTRING;

Exemple 1: Obtenez la structure HTML à l'aide de la propriété OUTERHTML

Dans l'exemple suivant, nous obtiendrons le contenu de l'élément à l'aide de la propriété OUTERHTML. Ici, nous allons d'abord créer un «div"Élément à l'aide de la balise HTML et attribuez un ID"div"Cela contient plusieurs éléments, y compris un titre, un étiquette et un bouton. Il y a un événement OnClick attaché avec le bouton, qui invoquera la fonction définie nommée «getContentByouterHtml ()”Pour montrer la structure complète de l'élément HTML:

Bienvenue dans le = "Color: Red"> Linuxhint.

C'est le meilleur = "Color: Green"> Site Web pour apprendre et polir votre = "couleur: vert"> Compétences!


Cliquez ici!

Ensuite, définissez le «getContentByouterHtml ()”Fonction qui déclenchera sur le"sur clic" événement. Il affichera le contenu de l'élément de la div, y compris toutes les balises. Dans la fonction, nous passerons d'abord le «div”ID du conteneur au«getElementByid ()«La méthode en tant qu'argument montre donc le contenu de l'élément dans la méthode alert () en appelant la propriété OuterHtml:

fonction getContentByouterHtml ()
var getCont = document.getElementById ("div");
alerte ("Html extérieur: \ n” + getCont.OUTERHTML);

La sortie montre la structure complète de l'élément, y compris ses éléments enfants:

Exemple 2: Définissez et obtenez la structure HTML à l'aide de la propriété OUTERHTML

Dans cet exemple, nous allons définir du contenu sur le DOM à l'aide de la propriété JavaScript OUTERHTML, puis obtiendrons la structure complète de l'élément spécifié.

Ici, nous allons créer deux boutons, l'un est «Ensemble!"Cela déclenchera le"setouterhtml ()«Fonction sur un«sur clic»Événement et définit du contenu sur le DOM, et le deuxième bouton est«Obtenir«Cela obtiendra la structure complète de l'élément en déclenchant le«getContentByouterHtml ()" fonction:

Définissez et obtenez le contenu en tant qu'exterhtml:

Ensemble!
Obtenir

Dans le fichier javascript, définissez deux fonctions, le «setouterhtml ()" et le "getContentByouterHtml ()". Dans la fonction setouterhtml (), définissez le contenu avec

Tag à l'aide de la syntaxe de propriété SET OUTERHTML comme élément enfant de l'élément:

fonction setouterhtml ()
var setCont = document.getElementById ("set");
setCont.OUTERHTML = "

C'est le meilleur site Web pour apprendre et polir vos compétences!

"

Ensuite, dans la fonction getContentByouterHtml (), obtenez la structure complète de l'élément à l'aide de la syntaxe de propriété GETHTML:

fonction getContentByouterHtml ()
var getCont = document.getElementById ("div");
alerte (getCont.OUTERHTML);

Sortir

Nous avons couvert toutes les informations essentielles sur la propriété JavaScript extérieure.

Conclusion

Le "extérieur»Est la propriété JavaScript de l'interface DOM qui fournit la structure HTML complète de l'élément, y compris ses balises d'ouverture et de fermeture. Il est similaire à la propriété InnerHTML, mais la différence entre eux est que InnerHTML accède. Dans cette étude, nous avons expliqué la propriété OUTERHTML en JavaScript.