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:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!–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>
|