CODEWITHSUNDEEP
javascriptdom
Benny Thadikaran
Benny Thadikaran

Reputation: 1201

Adding text to an existing text element in JavaScript via DOM

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.

Upvotes: 84

Views: 387009

Answers (7)

ibrohim Zuhriddinov
ibrohim Zuhriddinov

Reputation: 11

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>

Upvotes: -4

Frederick M. Rogers
Frederick M. Rogers

Reputation: 921

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+

Upvotes: 8

Kaushar Alam
Kaushar Alam

Reputation: 73

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

Upvotes: 1

James Monger
James Monger

Reputation: 10675

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>

Upvotes: 117

Donii Hoho
Donii Hoho

Reputation: 381

What about this. 

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

Upvotes: 5

Deep
Deep

Reputation: 9794

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>

Upvotes: 30

Arkej
Arkej

Reputation: 2241

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>

Upvotes: 4

Related Questions