11 - 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

<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<script src="funciones.js"></script>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</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);

Retornar