Para cambiar el contenido de un DIV de forma dinámica, lo más fácil es modificar el contenido del atributo innerHTML del elemento div.
<html>
<head>
<title>Div</title>
</head>
<body>
<div id='c'></div>
<script languaje="JavaScript">
var divContainer = document.getElementById("c");
function init() {
divContainer.innerHTML = "Nuevo contenido en del div!";
}
window.onload = init;
</script>
</body>
</html> En el código anterior tenemos un div con id "c".
Por si quisieramos cambiar el contenido del div varias veces, creamos la variable 'divContainer' que guardará en memoria la instancia del elemento div, así no tendremos que buscar en el DOM del documento HTML el elemento con id "c", cada vez que queramos cambiar o consultar su contenido.
var divContainer = document.getElementById("c");
Ahora simplemente hemos creado una función init(), que se ejecutará cuando el contenido del documento HTML haya sido cargado por completo en el navegador.
window.onload = init;
Como podéis ver solamente hace falta asignar al atributo innerHTML el nuevo String que contendrá el div.
divContainer.innerHTML = "Nuevo contenido en del div!";
Para cambiar en una sola línea el contenido de un div, es tan simple como lo siguiente:
document.getElementById("c").innerHTML = "Cambiar contenido en el div";El string que asignamos puede contener tags html, con esto tenemos la posibilidad de insertar nuevos elementos en un div, o dar estilo al texto:
document.getElementById("c").innerHTML = "Cambiar contenido </br> en el div";
Eso es todo!! Un saludete!
No hay comentarios:
Publicar un comentario