Para obtener/acceder al HTML de un elemento DOM en JavaScript, el primer paso es identificar el elemento en base a su id, nombre o nombre de etiqueta. Luego, podemos usar inner.HTML o outside.HTML para obtener el HTML.
1. Usando el método getElementById(): este método obtiene/identifica los elementos DOM usando su ID y devuelve el elemento.
Ejemplo:
Javascript
<!DOCTYPE html>
<html>
<head>
<title>
How to get/change the HTML with
DOM element in JavaScript?
</title>
</head>
<body>
<h3>
Accessing HTML of a DOM
element in JavaScript.
</h3>
<p id="iD1">
JavaScript is used for web programming.
</p>
<button onclick=getHtml()>
Get and change the html for DOM element
</button>
<script>
function getHtml() {
var Element = document.getElementById("iD1");
alert(Element.innerHTML);
Element.style.color = "orange";
Element.innerHTML = "GeeksforGeeks";
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
2. Usando el método getElementByName(): este método obtiene/identifica el elemento DOM usando su nombre de clase y devuelve el elemento.
Ejemplo:
Javascript
<!DOCTYPE html>
<html>
<head>
<title>
How to get/change the HTML with
DOM element in JavaScript?
</title>
</head>
<body>
<h3>
Accessing HTML of a DOM
element in JavaScript.
</h3>
<p class="p1">
JavaScript is used for web programming.
</p>
<button onclick=getHtml()>
Get and change the html
for DOM element
</button>
<script>
function getHtml() {
var Element =
document.getElementsByClassName("p1");
alert(Element[0].innerHTML);
Element[0].style.color = "blue";
Element[0].innerHTML = "GeeksforGeeks";
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
3. Usar getElementsByTagName(): este método obtiene/identifica el elemento DOM usando su nombre de etiqueta y lo devuelve.
Ejemplo:
Javascript
<!DOCTYPE html>
<html>
<head>
<title>
How to get/change the HTML with
DOM element in JavaScript?
</title>
</head>
<body>
<h3>
Accessing HTML of a DOM
element in JavaScript.
</h3>
<p>JavaScript is used for web programming.</p>
<p>JavaScript was invented in 1990s.</p>
<button onclick=getHtml()>
Get and change the html for DOM element
</button>
<script>
function getHtml() {
var Element = document.getElementsByTagName("p");
for (var i = 0; i < Element.length; i++) {
alert(Element[i].innerHTML);
Element[i].innerHTML = "GeeksforGeeks.";
}
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
NOTA: Los tres enfoques anteriores usan la propiedad inner.HTML del elemento DOM para obtener el HTML y alertarlo y luego cambia el contenido HTML presente en el elemento. La propiedad inner.HTML se usa principalmente para cambiar el texto o, más bien, el contenido presente, mientras que outside.HTML se usa para cambiar la etiqueta y el contenido del texto, ya que devuelve el contenido HTML junto con su etiqueta.
El siguiente ejemplo ilustra el uso de la propiedad outside.HTML usando el método getElementsByTagName().
Javascript
<!DOCTYPE html>
<html>
<head>
<title>
How to get/change the HTML with
DOM element in JavaScript?
</title>
</head>
<body>
<div> GeeksforGeeks </div>
<button onclick=getHtml()>
Get HTML for DOM element
</button>
<script>
function getHtml() {
var Element = document.getElementsByTagName("div");
alert(Element[0].outerHTML);
Element[0].style.color = "red";
Element[0].outerHTML = "<h1> JavaScript. </h1>"
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Las funciones getElementById(), getElementsByClassName() también se pueden usar para obtener los elementos DOM para acceder a HTML externo de la misma manera que se usaron para acceder a HTML interno. Por lo tanto, podemos acceder al HTML de un DOM utilizando los métodos anteriores.