Cambiar HTML interno usando JavaScript
En JavaScript, dicha propiedad interactúa con los elementos HTML, pero el innerHTML es uno de los más preferidos. La propiedad innerHTML generalmente devuelve el valor predeterminado establecido en la sección HTML de un elemento determinado.
La propiedad también puede establecer valores definidos por el usuario; el valor aquí representa una cadena. Este breve tutorial verá cómo la propiedad realiza su tarea.
Use la propiedad innerHTML para cambiar el contenido HTML
La propiedad innerHTML suele etiquetarse junto con la instancia de un elemento HTML. Un selector de consulta definirá un área específica para realizar un cambio, alterando así el contenido previamente codificado.
Tendremos un elemento div con cierto contenido de cadena aquí. Si hubiéramos consolado el elemento especificado con la propiedad innerHTML, obtendríamos exactamente lo que se ha codificado allí.
Por ejemplo, habríamos recibido abc como resultado, pero hemos alterado el valor y lo hemos configurado en algo diferente. Por lo tanto, incluso después de que el elemento div tenga su contenido, seguirá siendo activado por la nueva cadena establecida y la vista previa en la ventana.
Fragmento de código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<body>
<script>
function doChange(){
document.getElementById('change').innerHTML = ('Dealing with JavaScript innerHTML.');
}
window.onload=doChange;
</script>
<div id="change">abc</div>
</body>
</html>
Producción:
