La propiedad DOM innerHTML se usa para establecer o devolver el contenido HTML de un elemento.
Sintaxis:
Devuelve la propiedad innerHTML.
Object.innerHTML
Se utiliza para establecer la propiedad innerHTML.
Object.innerHTML = value
Dónde,
- valor: Representa el contenido de texto del elemento HTML.
Valor devuelto: esta propiedad devuelve una string que representa el contenido HTML de un elemento.
Ejemplo 1: este ejemplo muestra cómo cambiar el contenido de la etiqueta de párrafo mediante la propiedad innerHTML.
HTML
<!DOCTYPE html> <html> <body style="text-align: center"> <h1 style="color:green"> GeeksforGeeks </h1> <h2> DOM innerHTML Property </h2> <p id="p">GeeksforGeeks</p> <button onclick="geek()">Click me!</button> <script> function geek() { document.getElementById("p").innerHTML = "A computer science portal for geeks."; } </script> </body> </html>
Producción:
Ejemplo 2: este ejemplo muestra cómo obtener el valor de la etiqueta de párrafo mediante la propiedad innerHTML.
HTML
<!DOCTYPE html> <html> <body style="text-align: center"> <h1 style="color:green"> GeeksforGeeks </h1> <h2> DOM innerHTML Property </h2> <p id="P">A computer science portal for geeks.</p> <button onclick="geek()">Try it</button> <p id="p"></p> <script> function geek() { var x = document.getElementById("P").innerHTML; document.getElementById("p").innerHTML = x; document.getElementById("p").style.color = "green"; } </script> </body> </html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad DOM innerHTML se enumeran a continuación:
- Google Chrome 33.0 y superior
- Internet Explorer 4 y superior
- Microsoft Edge 12.0 y superior
- Firefox 1.0 y superior
- Ópera 8.0 y superior
- Safari 9.0 y superior
Publicación traducida automáticamente
Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA