Agregar contenido a un DIV sin reemplazar lo anterior

Creo un DIV y le asigno el id "texto_chat"
Agrego una funcion en Javascript que obtiene la instancia de ese DIV segun su ID y llamo a su metodo innerHTML
Lo mas importante es aprovechar que ese objeto implementa el operador "+" para permitirnos agregar contenido en vez de reemplazarlo.

 

Archivo "prueba.html":

<html><head><title>Falso Chat</title>
<script type="text/javascript">
    function AgregarLineaDeTexto(TextoLinea) {
        document.getElementById("texto_chat").innerHTML += "<br>" + TextoLinea;  // Agrego nueva linea antes
    }
</script>
</head>
<body>
<input type="button" value="Agregar 'Hola'" onClick="AgregarLineaDeTexto('Hola')">
<input type="button" value="Agregar 'Chau'" onClick="AgregarLineaDeTexto('Chau')">
<div id="texto_chat">Este texto no va a desaparecer...</div>
</body></html>

Comentarios