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;_x000D_
var y = document.createTextNode("This just got added");_x000D_
_x000D_
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.
This question is related to
javascript
dom
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");_x000D_
var text = document.createTextNode("This just got added");_x000D_
_x000D_
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");_x000D_
_x000D_
paragraph.textContent += "This just got added";<p id="p">This is some text</p>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> <!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>
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+
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>What about this.
var p = document.getElementById("p")_x000D_
p.innerText = p.innerText+" And this is addon."<p id ="p">This is some text</p>remove .textContent from var t = document.getElementById("p").textContent;
var t = document.getElementById("p");_x000D_
var y = document.createTextNode("This just got added");_x000D_
_x000D_
t.appendChild(y);<p id ="p">This is some text</p>Source: Stackoverflow.com