Curso JavaScript y jQuery: comparación innerHTML y textContent

Vamos a ver con un ejemplo la diferencia de funcionamiento entre las propiedades innerHTML y textContent que hemos explicado en los apartados anteriores.

Aquí tenemos una lista de ciudades, creada con los elementos HTML ‘ul’ y ‘li’:

Madrid
Barcelona
Valencia
Sevilla
Bilbao
Zaragoza

Pulsa en cada uno de estos dos botones y verás que se obtiene:

Aquí te mostramos extracto del código del anterior ejemplo donde vemos cómo se ha definido la lista y los botones en HTML y las dos funciones JavaScript con «innerHTML» y «textContent» que son llamadas desde esos botones al hacer clic con el ratón:

<!--Lista-->
<ul id="listaEjemplo">
<li id="item1">Madrid</li>
<li id="item2">Barcelona</li>
<li id="item2">Valencia</li>
<li id="item2">Sevilla</li>
<li id="item2">Bilbao</li>
<li id="item2">Zaragoza</li>
</ul>

<!--Botones que llaman a las funciones JavaScript definidas abajo-->
<button style="background: yellow; padding: 10px;" onclick="extraerTexto()">Extraer textContent</button> 
<button style="padding: 10px;; color: white; background: blue;" onclick="extraerHTML()">Extraer innerHTML</button>

<!Funciones JavaScript para extraer contenido de la lista-->
<script>

function extraerTexto() {
var contenido = document.getElementById("listaEjemplo").textContent;
....
}

function extraerHTML() {
var contenido = document.getElementById("listaEjemplo").innerHTML;
....
}
</script>

<li id="item1">Madrid</li>

<li id="item2">Barcelona</li>

<li id="item2">Valencia</li>

<li id="item2">Sevilla</li>

<li id="item2">Bilbao</li>

<li id="item2">Zaragoza</li>

</ul>

<button style="background: yellow; padding: 10px;" onclick="extraerTexto()">Extraer textContent</button>

<button style="padding: 10px;; color: white; background: blue;" onclick="extraerHTML()">Extraer innerHTML</button>

<!Funciones JavaScript para extraer contenido de la lista-->

function extraerTexto() {

var contenido = document.getElementById("listaEjemplo").textContent;

....

}

function extraerHTML() {

var contenido = document.getElementById("listaEjemplo").innerHTML;

....

}

</script>