Agregar texto al elemento en JavaScript

1. Agregue texto a un elemento de texto existente en JavaScript a través de DOM usando appendChild
2. Agregue texto a un elemento de texto existente en JavaScript a través de DOM usando textContent
3. Agregue texto a un elemento de texto existente en JavaScript a través de DOM usando innerText

La modificación del contenido DOM es la tarea más básica cuando se trata de navegadores. A veces queremos cambiar el texto del DOM en función de ciertas acciones sin volver a renderizar todo el DOM. En este artículo, aprenderemos cómo agregar texto a un elemento de texto existente en JavaScript a través de DOM.

Agregue texto a un elemento de texto existente en JavaScript a través de DOM usando appendChild

DOM contiene la lista de nodos. Cada nodo contiene sus propios datos. JavaScript permite agregar la nueva instancia de nodo a la lista de nodos secundarios existentes dentro del nodo principal seleccionado.

Sintaxis:

appendChild(aChild);

La función appendChild() toma el parámetro de entrada de un nodo recién creado o el elemento más común que debe agregarse al nodo principal. appendChild() mueve el elemento secundario dado de su ubicación actual a la nueva ubicación si hace referencia a un nodo existente.

Devuelve el nodo que es el hijo agregado (un hijo), excepto cuando un hijo es un DocumentFragment. En este caso, se devuelve el DocumentFragment vacío. Para obtener más información, lea la documentación del método appendChild.

<p id="p">Hello </p>

<p id="p1">JavaScript Channel </p>

const text = document.createTextNode('Welcome to My channel');
const pNode = document.getElementById('p');
pNode.appendChild(text);

En el ejemplo anterior, creamos el nodo de texto usando document.createTextNode("Welcome to My channel") y luego lo agregamos al nodo p del documento. La salida del código anterior creará un DOM como el siguiente.

Producción :

"Hello Welcome to My channel"

Agregue texto a un elemento de texto existente en JavaScript a través de DOM usando textContent

Es propiedad de la interfaz Node, que representa el contenido textual del nodo seleccionado y sus descendientes. JavaScript permite agregar el otro texto al contenido de texto actual desde los nodos secundarios dentro del nodo principal seleccionado.

Sintaxis:

textContent = data;

La propiedad textContent actualiza el contenido de texto del nodo seleccionado. Los usuarios pueden modificar los datos de texto según sea necesario, como concatenación, actualización, etc. Si el nodo es un documento o un tipo de documento, textContent devuelve nulo. textContent devuelve la concatenación del textContent de cada nodo secundario para otros tipos de nodos, excepto comentarios e instrucciones de procesamiento. Esta es una cadena vacía cuando un nodo no tiene hijos. Para más información, lee la documentación de la propiedad textContent.

const pNode = document.getElementById('p');
pNode.textContent += 'Welcome to My channel';

En el ejemplo anterior, obtuvimos el nodo de párrafo usando document.getElementById("p") y luego agregamos Bienvenido a mi canal al contenido textual existente del nodo de párrafo. La salida del código anterior actualiza un DOM de la siguiente manera:

Producción :

"Hello Welcome to My channel"

Agregue texto a un elemento de texto existente en JavaScript a través de DOM usando innerText

Pertenece al HTMLElement. Esta propiedad representa el contenido textual representado del nodo seleccionado y sus descendientes. JavaScript permite agregar el otro texto al contenido de texto actual desde los nodos secundarios dentro del nodo principal seleccionado.

Sintaxis:

const renderedText = htmlElement.innerText
htmlElement.innerText = string

La propiedad innerText actualiza el contenido de texto del nodo seleccionado. Los usuarios pueden cambiar los datos de texto según sea necesario, como concatenación, actualización, etc. Para obtener más información, consulte la documentación de la propiedad innerText.

const pNode = document.getElementById('p');
pNode.innerText += 'Welcome to My channel';

En el ejemplo anterior, obtuvimos el nodo de párrafo usando document.getElementById("p") y luego agregamos Bienvenido a mi canal al contenido textual existente del nodo de párrafo. La salida del código anterior actualiza un DOM de la siguiente manera:

Producción :

"Hello Welcome to My channel"

La única diferencia entre textContent e innerText es que textContent obtiene el contenido de todos los elementos, incluidos los elementos script y style. Por el contrario, innerText solo muestra elementos legibles por humanos. textContent devuelve todos los elementos del nodo. Por el contrario, innerText tiene en cuenta el estilo y no devuelve ningún texto de elementos ocultos. En principio, innerText reconoce la apariencia renderizada del texto, pero textContent no lo hace.