La propiedad externa en JavaScript

A veces, los desarrolladores deben reemplazar el código fuente de un elemento con texto en forma de HTML o acceder al código fuente de un elemento en tiempo de ejecución. Para este propósito, utilice la propiedad externa que sea similar al elemento.innerhtml. La principal diferencia entre estas dos propiedades es que InnerHTML accede al contenido de texto plano de un elemento sin etiquetas HTML, mientras que la propiedad externa se debe usar si necesita etiquetas HTML.

Este estudio explicará la propiedad externa en JavaScript.

¿Cuál es la propiedad externa en JavaScript??

El "externo"Es la propiedad JavaScript de la interfaz DOM que proporciona el componente HTML del elemento. Junto con el texto, también comprende la estructura HTML completa del elemento, incluidas sus etiquetas de apertura y cierre. Además, al usar la propiedad externa, puede acceder o modificar la estructura HTML del elemento.

Cómo usar la propiedad externa en JavaScript?

Siga la sintaxis dada para obtener el contenido HTML utilizando la propiedad Outerhtml:

elemento.externo

La siguiente sintaxis se usa para configurar el contenido HTML usando la propiedad Outerhtml:

elemento.OUTERHTML = htmlString;

Ejemplo 1: Obtenga la estructura HTML utilizando la propiedad externa

En el siguiente ejemplo obtendremos el contenido del elemento utilizando la propiedad Outerhtml. Aquí, primero crearemos un "div"Elemento usando la etiqueta HTML y asigne una ID"div"Eso contiene múltiples elementos, que incluyen un encabezado, etiqueta y botón. Hay un evento OnClick conectado con el botón, que invocará la función definida llamada "getContentByouterhtml ()"Para mostrar la estructura completa del elemento HTML:

Bienvenido a la = "Color: Red"> Linuxhint.

Es el mejor = "color: verde"> sitio web para aprender y pulir su = "color: verde"> habilidades!


Haga clic aquí!

A continuación, defina el "getContentByouterhtml ()"Función que se activará en el"al hacer clic" evento. Mostrará el contenido del elemento del div, incluidas todas las etiquetas. En la función, primero pasaremos el "div"ID del contenedor al"getElementById ()El método "como argumento, entonces, muestra el contenido del elemento en el método alert () llamando a la propiedad Outerhtml:

function getContentByouterhtml ()
var getCont = documento.getElementByid ("div");
alerta ("HTML externo: \ n" + GetCont.externo);

La salida muestra la estructura completa del elemento, incluidos sus elementos infantiles:

Ejemplo 2: Establezca y obtenga la estructura HTML utilizando la propiedad externa

En este ejemplo, estableceremos algún contenido en el DOM utilizando la propiedad JavaScript Outerhtml y luego obtendremos la estructura completa del elemento especificado.

Aquí, crearemos dos botones, uno es "Colocar!"Que activará el"setouterhtml ()"Funciona en un"al hacer clic"Evento y establece algo de contenido en el DOM, y el segundo botón es"Conseguir"Eso obtendrá la estructura completa del elemento activando el"getContentByouterhtml ()" función:

Establezca y obtenga el contenido como OUTERHTML:

Colocar!
Conseguir

En el archivo JavaScript, defina dos funciones, el "setouterhtml ()" y el "getContentByouterhtml ()". En la función setouterhtml (), establezca el contenido con

Etiqueta usando la sintaxis de propiedad Outerhtml establecida como elemento infantil del elemento:

función setOUTERHTML ()
var setCont = documento.getElementById ("set");
setcont.OUTERHTML = "

Es el mejor sitio web para aprender y pulir sus habilidades!

";

Luego, en la función GetContentByoUterhtml (), obtenga la estructura completa del elemento utilizando la sintaxis de la propiedad Get Outerhtml:

function getContentByouterhtml ()
var getCont = documento.getElementByid ("div");
Alerta (GetCont.externo);

Producción

Hemos cubierto toda la información esencial sobre la propiedad Outerhtml JavaScript.

Conclusión

El "externo"Es la propiedad JavaScript de la interfaz DOM que proporciona la estructura HTML completa del elemento, incluidas sus etiquetas de apertura y cierre. Es similar a la propiedad InnerHTML, pero la diferencia entre ellos es que InnerHTML accede al contenido de texto plano de un elemento sin etiquetas HTML, mientras que la propiedad externa obtiene contenido con etiquetas HTML. En este estudio, explicamos la propiedad externa en JavaScript.