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:

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>

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.

James Monger · Accepted Answer · 2017-01-20 12:52:26Z

120

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:

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

paragraph.appendChild(text);

<p id="p">This is some text</p>

However instead, if you like, you can just modify the text itself (rather than adding a new node):

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

paragraph.textContent += "This just got added";

<p id="p">This is some text</p>

answered Jan 20, 2017 at 12:52

James Monger

10.8k9 gold badges65 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Benny Thadikaran Over a year ago

From what i can see none of these allow HTML tags to be inserted or they are parsed as strings. So i'm guessing the best way would be to create br tags or so and append it?

James Monger Over a year ago

What do you want a line break for, @BennyThadikaran? If they're to separate two pieces of text, consider using two p tags. Line breaks should be sparingly used, and not used to format text.

tkamath99 Over a year ago

Can you tell me how to add the content before it ??

James Monger Over a year ago

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

Deep · Accepted Answer · 2017-01-20 12:49:58Z

31

Instead of appending element you can just do.

 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>

answered Jan 20, 2017 at 12:49

Deep

9,7962 gold badges24 silver badges34 bronze badges

Comments

Frederick M. Rogers · Accepted Answer · 2017-01-20 13:00:12Z

8

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+

answered Jan 20, 2017 at 13:00

Frederick M. Rogers

9316 gold badges14 silver badges39 bronze badges

1 Comment

Drenai Over a year ago

A node created with createTextNode is a new element, so appendChild is valid to use

Donii Hoho · Accepted Answer · 2017-01-20 12:52:12Z

5

What about this.

var p = document.getElementById("p")
p.innerText = p.innerText+" And this is addon."

<p id ="p">This is some text</p>

answered Jan 20, 2017 at 12:52

Donii Hoho

3811 silver badge6 bronze badges

Comments

Arkej · Accepted Answer · 2017-01-20 12:49:53Z

4

remove .textContent from 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>

answered Jan 20, 2017 at 12:49

Arkej

2,2611 gold badge16 silver badges22 bronze badges

Comments

Kaushar Alam · Accepted Answer · 2017-01-20 12:58:48Z

1

   <!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>

answered Jan 20, 2017 at 12:58

Kaushar Alam

735 bronze badges

Comments

ibrohim Zuhriddinov · Accepted Answer · 2020-11-30 10:01:38Z

-4

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>

answered Nov 30, 2020 at 10:01

ibrohim Zuhriddinov

11

1 Comment

ekl1pse Over a year ago

Please do check if your solution is working before submitting it as an answer

Collectives™ on Stack Overflow

Adding text to an existing text element in JavaScript via DOM

7 Answers 7

4 Comments

Comments

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

4 Comments

Comments

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related