adding text to an existing text element in javascript via DOM

Question

I am trying to figure how to add text to a p tag or h1 tag that already has a text node    For example    x000D   x000D  var t   document getElementById  p   textContent  x000D  var y   document createTextNode  This just got added    x000D   x000D  t appendChild y   x000D   lt p id  p  gt This is some text lt  p gt  x000D   x000D   x000D    This code gives an error appendChild is not a function  Most of the help pages first create a p tag and then append the text    What is the right way to add text to an existing text element   PS  I ve used innerHTML before to do this  but for learning purposes i want to avoid it here

User · Accepted Answer

The reason that appendChild is not a function is because you re executing it on the textContent of your p element   You instead just need to select the paragraph itself  and then append your new text node to that    x000D   x000D  var paragraph   document getElementById  p    x000D  var text   document createTextNode  This just got added    x000D   x000D  paragraph appendChild text   x000D   lt p id  p  gt This is some text lt  p gt  x000D   x000D   x000D    However instead  if you like  you can just modify the text itself  rather than adding a new node     x000D   x000D  var paragraph   document getElementById  p    x000D   x000D  paragraph textContent     This just got added   x000D   lt p id  p  gt This is some text lt  p gt  x000D   x000D   x000D

User · Answer

The method  appendChild   is used to add a new element NOT add text to an existing element   Example   var p   document createElement  p    document body appendChild p     Reference  Mozilla Developer Network  The standard approach  for this is using  innerHTML    But if you want a alternate solution you could try using element textContent   Example   document getElementById  foo   textContent    This is som text     Reference  Mozilla Developer Network  How ever this is only supported in IE 9

User · Answer

Instead of appending element you can just do    document getElementById  p   textContent      this has just been added      x000D   x000D  document getElementById  p   textContent      this has just been added   x000D   lt p id   p  gt This is some text lt  p gt  x000D   x000D   x000D

User · Answer

remove  textContent from var t   document getElementById  p   textContent    x000D   x000D  var t   document getElementById  p    x000D  var y   document createTextNode  This just got added    x000D   x000D  t appendChild y   x000D   lt p id   p  gt This is some text lt  p gt  x000D   x000D   x000D

User · Answer

x000D   x000D  var t   document getElementById  p   textContent  var y   document createTextNode  This just got added     t appendChild y   x000D   lt p id  p  gt This is some text lt  p gt  x000D   x000D   x000D

User · Answer

lt  DOCTYPE html gt      lt html gt      lt head gt      lt script   src  https   ajax googleapis com ajax libs jquery 3 1 1 jquery min js  gt  lt  script gt     lt script gt      document  ready function           btn1   click function           p   append    lt b gt Appended text lt  b gt                      lt  script gt     lt  head gt    lt body gt     lt p gt This is a paragraph  lt  p gt     lt p gt This is another paragraph  lt  p gt       lt button id  btn1  gt Append text lt  button gt     lt  body gt   lt  html gt

User · Answer

What about this     x000D   x000D  var p   document getElementById  p   x000D  p innerText   p innerText   And this is addon   x000D   lt p id   p  gt This is some text lt  p gt  x000D   x000D   x000D

[javascript] adding text to an existing text element in javascript via DOM

Examples related to javascript

Examples related to dom