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:

  let nt=document.createTextNode('Texto del nodo')

Para añadirlo luego a un párrafo por ejemplo debemos llamar al método appendChild:

  let 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 lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prueba</title>
</head>

<body>
    <p id="parrafo">Texto inicial:</p>
    <input type="button" value="Agregar nodo de texto" onClick="agregar()">
    <script src="funciones.js"></script>
</body>

</html>

funciones.js

let contador = 1

function agregar() {
    let nt = document.createTextNode('Nuevo texto ' + contador + '-')
    let 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:

    let nt = document.createTextNode('Nuevo texto ' + contador + '-')

Seguidamente obtenemos una referencia al párrafo:

    let nparrafo = document.getElementById('parrafo')

finalmente añadimos el nodo de texto al párrafo:

    nparrafo.appendChild(nt)

Retornar