12 - Agregar un nodo de texto (appendChild - createTextNode) |
Para la creación de un nodo de texto disponemos del siguiente método de la clase document:
var nt=document.createTextNode('Texto del nodo');
Para añadirlo luego a un párrafo por ejemplo debemos llamar al método appendChild:
var nparrafo=document.getElementById('parrafo');
nparrafo.appendChild(nt);
Veamos un ejemplo en el que cada vez que se presione un botón se añada un nodo de texto a un párrafo mostrando cuántos nodos de texto se han añadido:<html> <head> <title>Problema</title> <script language="javascript" src="funciones.js" type="text/javascript"></script> </head> <body> <p id="parrafo">Texto inicial:</p> <input type="button" value="Agregar nodo de texto" onClick="agregar()"> </body> </html>funciones.js
var contador=1;
function agregar()
{
var nt=document.createTextNode('Nuevo texto '+contador+'-');
var nparrafo=document.getElementById('parrafo');
nparrafo.appendChild(nt);
contador++;
}
A la variable contador la definimos fuera de la función para que sea global.
var nt=document.createTextNode('Nuevo texto '+contador+'-');
Seguidamente obtenemos una referencia al párrafo:
var nparrafo=document.getElementById('parrafo');
finalmente añadimos el nodo de texto al párrafo:
nparrafo.appendChild(nt);