Para manipular el contenido de los nodos tenemos diferentes métodos y propiedades dependiendo del tipo de nodo que sea. Vamos a verlas.
Modificar contenido de un elemento:
Propiedad innerHTML
Esta propiedad establece o devuelve el contenido HTML de un elemento.
Veamos un ejemplo con las dos opciones.
<h1 id="padre">Encabezado</h1>
<script type="text/javascript">
var padre = document.getElementById("padre");
alert(padre.innerHTML); // Nos devuelve el contenido HTML de "padre"
padre.innerHTML = "<spam style='color:red'>Nuevo encabezado</spam>"; // Establecemos un nuevo contenido para "padre"
</script>
// 24.1
Como se puede ver en este último código, el contenido que añadimos puede ser tanto texto como código HTML.
Propiedad textContent
Similar a «innerHTML», establece o devuelve el contenido textual de un nodo y sus hijos.
<div id="padre">
<h1>Encabezado</h1>
<p>parrafo . .</p>
</div>
<script>
var padre = document.getElementById("padre");
alert(padre.textContent); // Nos devolverá los textos "Encabezado" y "parrafo . ."
</script>
// 24.2
La diferencia con «innerHTML» radica en que no nos deja incluir código HTML. Está característica la hace más segura para formularios.
(I.E. 9) en adelante
Nota:
He explicado tan solo alguna de las propiedades que posee javascript para la modificación de contenido de elementos, para ir conociendo otras te recomiendo visitar: http://www.w3schools.com/jsref/dom_obj_all.asp
Modificar el atributo de un elemento:
Método setAttribute()
Con él podemos declarar un nuevo atibuto a un elemento y darle un valor. Si el atributo ya existe solo se cambiará el valor.
<a id="link">Google</a>
<script type="text/javascript">
document.getElementById("link").setAttribute("href", "http://www.google.com");
</script>
// 24.3
En este ejemplo, al elemento <a> le hemos añadido el atributo «href» con el valor «http://www.google.com«.
No se recomienda añadir un atributo «style» con este método, es preferible usar el objeto style el cual veremos más adelante.
Método getAttribute()
Este método devuelve el valor del atributo especificado.
<a id="link" href="http://www.google.com">Google</a>
<p></p>
<script>
var valorAtributo = document.getElementById("link").getAttribute("href"); // Conseguimos el valor
var parrafo = document.getElementsByTagName("p")[0];
parrafo.innerHTML = valorAtributo; // Mostramos el valor
</script>
// 24.4
En este último código hemos conseguido el valor del atributo «href» para posteriormente mostrarlo dentro del párrafo del documento HTML.
Si el atributo no existe el valor devuelto será «null».
Método removeAttribute()
Con este método borramos el atributo especificado de un elemento (sin retornarlo).
Veamos un sencillo ejemplo.
<a id="link" href="http://www.google.com">Google</a>
<script>
document.getElementById("link").removeAttribute("href");
</script>
// 24.5
Método hasAttribute()
Este método devuelve true si el atributo que le especifiquemos existe en el elemento, de lo contrario devolverá false.
<a id="link" href="http://www.google.com">Google</a>
<script>
var resultadoAtributo = document.getElementById("link").hasAttribute("href");
alert(resultadoAtributo);
</script>
// 24.6
En este caso hemos guardado en la variable «resultadoAtributo» el valor resultante de la comprobación de «hasAttribute».
(I.E. 9 en adelante)
Y esto es todo sobre cómo modificar el contenido de los nodos. En el próximo capítulo aprenderemos a modificar el atributo «style».
Ir a Javascript para novatos 25º
Dejar una opinión