El método appendChild agrega un nuevo nodo al final de la lista de un elemento hijo de un elemento padre especificado y el .método createTextNode crea un nuevo nodo de texto. Este método puede ser usado para escapar caracteres HTML

Método appendChild ()

El método appendChild() agrega un nodo como el último hijo de un nodo.

Sugerencia: Si desea crear un nuevo párrafo, con texto, recuerde crear el texto como un nodo Texto que anexa al párrafo, luego agregue el párrafo al documento. También puede utilizar este método para mover un elemento de un elemento a otro .

Consejo: utilice el método insertBefore () para insertar un nuevo nodo hijo antes de un nodo hijo existente especificado.

Sintaxis

node.appendChild(nodo)

Paramétros

nodo  Requerido. El objeto de nodo que desea agregar.

<!DOCTYPE html>
<html>
<body>
<p>Ejemplo </p>
<ul id="myList"><li>Caf&eacute</li><li>T&eacute</li><li>Agua</li><li>Jugo</li></ul>
<p>Haga clic en el botón para agregar un elemento al final de la lista.</p>
<button onclick="myFunction()">Probar</button>
<p><strong>Nota:</strong> luego cree un nodo Texto y luego agregue el nodo Texto al nodo LI.
Finalmente, agregue el nodo LI a la lista.</p>
<p id="demo"></p>
<script>
function myFunction() {
   var node = document.createElement("LI");
  var textnode = document.createTextNode("Gaseosa");
  node.appendChild(textnode);
  document.getElementById("myList").appendChild(node);
}
</script>
</body>
</html>

Ver ejemplo anterior

Método createTextNode()

El método createTextNode () crea un nodo de texto con el texto especificado.
Consejo: utilice el método createElement () para crear un nodo de elemento con el nombre especificado.
Sugerencia: después de crear el nodo de texto, use el método element .appendChild () o element .insertBefore () para agregarlo a un elemento.
Los elementos HTML a menudo constan de un nodo de elemento y un nodo de texto. Para crear un encabezado (por ejemplo, <h1>), debe crear un elemento <h1> un nodo de texto:

<!DOCTYPE html>
<html>
<body>
<p>Click the button to create a h1 element with some text.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
  var h = document.createElement("H1");
  var t = document.createTextNode("Agrego texto");
  h.appendChild(t);
  document.body.appendChild(h);
}
</script>
</body>
</html>

Ver ejemplo anterior

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:

<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<script>
var contador=1;
function agregar()
{
  var nt=document.createTextNode('Nuevo texto '+contador+'-');
  var nparrafo=document.getElementById('parrafo');
  nparrafo.appendChild(nt);
  contador++;
}
</script>
</head>
<body>
<p id="parrafo">Texto inicial:</p>
<input type="button" value="Agregar nodo de texto" onClick="agregar()">
</body>
</html>

Ver ejemplo anterior

El código javascript es

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);

(adsbygoogle = window.adsbygoogle || []).push({});

Agregar un nodo de texto (appendChild - createTextNode)

Método appendChild ()

Método createTextNode()