En este artículo, veremos la propiedad que se puede usar para modificar el contenido del elemento HTML. Para modificar el contenido del elemento HTML, usaremos la propiedad HTML DOM innerHTML .
La propiedad innerHTML se usa para establecer o devolver el contenido del elemento HTML.
Sintaxis:
Devuelve el contenido de un elemento.
Object.innerHTML
Se utiliza para establecer el contenido de un elemento.
Object.innerHTML = value
Enfoque: en el siguiente ejemplo, crearemos un elemento div que contiene un id «contenido» y un elemento de botón de entrada. Cuando el usuario hace clic en el botón, se llama a la función de JavaScript. Dentro de la función de JavaScript, primero seleccione el elemento div usando el selector document.getElementById() y use la propiedad innerHTML para modificar el contenido del elemento div.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Which property can be used to modify
the content of the HTML element?
</title>
<style>
h1 {
color: green;
}
#content {
font-size: 20px;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>
Which property can be used to modify
<br>the content of HTML element?
</h3>
<div id="content">
Welcome to GeeksforGeeks
</div>
<br>
<input type="button" value="Change Content"
onclick="myGeeks()">
</center>
<script>
function myGeeks() {
document.getElementById("content").innerHTML
= "A computer science portal for geeks";
}
</script>
</body>
</html>
Producción:
