Agregar texto a un elemento de texto existente en JavaScript a través de DOM

3 minutos de lectura

avatar de usuario
benny thadikaran

Estoy tratando de averiguar cómo agregar texto a un p etiquetar o h1 etiqueta que ya tiene un nodo de texto.

Por ejemplo:

var t = document.getElementById("p").textContent;
var y = document.createTextNode("This just got added");

t.appendChild(y);
<p id="p">This is some text</p>

Este código da un error. appendChild no es una función. La mayoría de las páginas de ayuda primero crean una p etiquetar y luego agregar el texto.

¿Cuál es la forma correcta de agregar texto a un elemento de texto existente?

PD: he usado innerHTML antes de hacer esto, pero para propósitos de aprendizaje quiero evitarlo aquí.

La razón que appendChild no es una función es porque la estás ejecutando en el textContent de tu p elemento.

En su lugar, solo necesita seleccionar el párrafo en sí y luego agregar su nuevo nodo de texto a eso:

var paragraph = document.getElementById("p");
var text = document.createTextNode("This just got added");

paragraph.appendChild(text);
<p id="p">This is some text</p>

Sin embargo, si lo desea, puede modificar el texto en sí (en lugar de agregar un nuevo nodo):

var paragraph = document.getElementById("p");

paragraph.textContent += "This just got added";
<p id="p">This is some text</p>

  • Por lo que puedo ver, ninguno de estos permite insertar etiquetas HTML o se analizan como cadenas. Entonces, supongo que la mejor manera sería crear etiquetas br o algo así y agregarlas.

    – Benny Thadikaran

    20 de enero de 2017 a las 13:26


  • ¿Para qué quieres un salto de línea, @BennyThadikaran? Si van a separar dos piezas de texto, considere usar dos p etiquetas Los saltos de línea se deben usar con moderación y no para dar formato al texto.

    – James Monger

    20 de enero de 2017 a las 13:36

  • ¿Puedes decirme cómo agregar el contenido antes?

    – tkamath99

    5 de febrero de 2020 a las 8:00

  • @tkamath99 paragraph.textContent = "This just got added before " + paragraph.textContent;

    – James Monger

    14 de febrero de 2020 a las 9:03

En lugar de agregar un elemento, simplemente puede hacerlo.

 document.getElementById("p").textContent += " this has just been added";
document.getElementById("p").textContent += " this has just been added";
<p id ="p">This is some text</p>

El método .appendChild() se usa para agregar un nuevo elemento NO agregue texto a un elemento existente.

Ejemplo:

var p = document.createElement("p");
document.body.appendChild(p);

Referencia: Red de desarrolladores de Mozilla

El enfoque estándar para esto es usar .innerHTML(). Pero si desea una solución alternativa, puede intentar usar element.textContent.

Ejemplo:

document.getElementById("foo").textContent = "This is som text";

Referencia: Red de desarrolladores de Mozilla

Sin embargo, esto solo es compatible con IE 9+

  • Un nodo creado con createTextNode es un elemento nuevo, entonces appendChild es válido para usar

    – Drenai

    5 de diciembre de 2018 a las 6:44

¿Qué pasa con esto?

var p = document.getElementById("p")
p.innerText = p.innerText+" And this is addon."
<p id ="p">This is some text</p>

retirar .textContent de var t = document.getElementById("p").textContent;

var t = document.getElementById("p");
var y = document.createTextNode("This just got added");

t.appendChild(y);
<p id ="p">This is some text</p>

avatar de usuario
Kaushar Alam

   <!DOCTYPE html>
   <html>
   <head>
   <script   src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script>
  $(document).ready(function(){
   $("#btn1").click(function(){
    $("p").append(" <b>Appended text</b>.");
   });

  });
 </script>
  </head>
 <body>

 <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>



 <button id="btn1">Append text</button>


</body>
</html>

avatar de usuario
ibrohim zuhriddinov

var t = document.getElementById("p").textContent;
var y = document.createTextNode("This just got added");

t.appendChild(y);
<p id="p">This is some text</p>

  • Verifique si su solución funciona antes de enviarla como respuesta

    – Vthechamp

    28 de diciembre de 2020 a las 20:26

¿Ha sido útil esta solución?