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:
pagina1.html
<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.
Cada vez que se presiona el botón creamos un nodo de texto agregándole el valor del contador:
  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);