JavaScript y jQuery: Reemplazar el contenido de un elemento usando innerHTML

En este pequeño mini tutorial quiero mostrarte cómo reemplazar el interior de un elemento en HTML con JavaScript y jQuery con cualquier otro contenido nuevo.

Supongamos que tenemos un elemento, por ejemplo, este DIV aquí, que hemos nombrado con el id "test":

<div id="test">Contenido antiguo</div>

Ahora queremos reemplazar el contenido de este elemento con la cadena "Hello World". Para ello, queremos ver una solución con JavaScript y otra solución con jQuery.

La solución JavaScript

document.getElementById("test").innerHTML = "Hello World";

En JavaScript, podemos usar la función getElementById() para seleccionar nuestro elemento y reemplazar su contenido con "Hello World" como se muestra en el ejemplo.

La solución jQuery

$("#test").html("Hello World");

Será más fácil si usamos jQuery. Aquí es suficiente seleccionar nuestro elemento con $("#test") y usar la función html() para cambiar el innerHTML del elemento.