Adding text to an existing text element in JavaScript via DOM
JavascriptDomJavascript Problem Overview
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);
This is some text
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.
Javascript Solutions
Solution 1 - Javascript
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);
This is some text
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";
This is some text
Solution 2 - Javascript
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>
Solution 3 - Javascript
What about this.
var p = document.getElementById("p")
p.innerText = p.innerText+" And this is addon."
<p id ="p">This is some text</p>
Solution 4 - Javascript
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+
Solution 5 - Javascript
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>
Solution 6 - Javascript
<!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>
Solution 7 - Javascript
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>