La propiedad outsideHTML de la interfaz DOM proporciona el fragmento HTML de ese elemento. No solo proporciona el contenido, sino toda la estructura HTML del elemento. También se puede usar para reemplazar la estructura HTML del elemento.
Sintaxis:
- Para devolver el HTML externo.
var value = element.outerHTML;
- Para establecer el HTML externo.
element.outerHTML = "HTML_Structure";
Valor de retorno: al obtener HTML externo, devuelve datos de string HTML.
Ejemplo 1: Este ejemplo muestra cómo obtener el HTML externo de un elemento con id= “gfg” .
HTML
<!DOCTYPE html>
<html>
<head>
<title>GeeksforGeeks</title>
</head>
<body>
<div id="gfg">
<h1>GeeksforGeeks</h1>
<p>Welcome geeks!</p>
</div>
<script>
var g = document.getElementById("gfg");
document.write(g.outerHTML);
</script>
</body>
</html>
Producción:
El HTML externo del elemento se puede ver en la salida:
Ejemplo 2: este ejemplo muestra cómo configurar o cambiar el HTML externo.
HTML
<!DOCTYPE html>
<html>
<head>
<title>GeeksforGeeks</title>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div id="d">
Click on Button to change
the outerHTML.
</div>
<br>
<button onclick="changeouter()">click</button>
<script>
function changeouter() {
var gfg = document.getElementById("d");
gfg.outerHTML =
"<h3>Hey Geeks! outerHTML is changed</h3>";
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Navegadores compatibles:
- Google cromo 33
- Borde 12
- Firefox 11
- explorador de Internet 4
- Ópera 8
- Safari 9