Adding text to existing text elements in javascript using the dom
I'm trying to figure out how to add text to a tag p or h1 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 tag and then append the text
How do you add text to existing text elements?
Ps i have used innerhtml before to do this but for learning purposes i want to avoid it here
Best Answer
The reason that appendChild
is not a function is because you're executing it on the textContent
of your p
element.
Instead you can just select the paragraph itself and then append your new text to it
var paragraph = document.getElementById("p");
var text = document.createTextNode("This just got added");
paragraph.appendChild(text);
<p id="p">This is some text</p>
You can change the text itself instead of adding a new node if you want
var paragraph = document.getElementById("p");
paragraph.textContent += "This just got added";
<p id="p">This is some text</p>