. Advertisement .
..3..
. Advertisement .
..4..
Are you a JavaScript learner struggling to get through the code of the project you are working on? Are you wondering to append text to an element using JavaScript? JavaScript has been one of the most popular languages for designing websites. Being a beginner, you should have a passion for coding and the determination to learn and type the code correctly.
Appending text to an element means adding the text to an element, which is a part of coding for a project for the appending purpose. Let’s have a look at how to append text to an element
How To Append Text to An Element Using JavaScript
When it comes to appending text to an element, you can use the following methods in the code to
- The ‘
document.createTextNode()’ method is used to create a text node - To append the text to an element, use the ‘
appendChild()’ method - The appendchild method adds the text to the end of the element of the children list
Let’s take a look at the example
HTML code example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Append text to an element using JavaScript</title>
</head>
<body>
<div id="sample_text">
How to Append Text <span style="background-color: greenyellow">to An Element Using JavaScript</span>
</div>
<script src="main.js"></script>
</body>
</html>Output:
......... ADVERTISEMENT .........
..8..
Using document.createTextNode() and appendChild() Method
These two methods are used in JavaScript to create a text node, and then append the text to the element. The appendChild() add the text to the end of the element.
JavaScript code related to the above:
const sample_text = document.getElementById('sample_text');
const text = document.createTextNode('***');
sample_text.appendChild(text);Output:
......... ADVERTISEMENT .........
..8..
We also added a method ‘document.getElementById()’ to select the element to append text.
Using insertAdjacentHTML() Method
You can use this method to append HTML to an element and not only text. JavaScript code will be like here:
const sample_text = document.getElementById('sample_text');
sample_text.insertAdjacentHTML(
'afterbegin',
'<span style="background-color: plum"> Additional HTML</span>',
);Output:
......... ADVERTISEMENT .........
..8..
The insertAdjacentHTML() method takes the parameter as ‘beforeend’ that is inside the element just after the last child. The ‘text’ is used to parse the string as HTML and insert it into the DOM. You should also note that don’t append HTML that is generated from user input without escaping it.
Using insertAdjacentText() Method
This method uses parameters ‘(afterbegin’, ‘my text’) to append a text to an element. This method takes a position and a string and inserts a new text at the place provided according to the component. Have a look at the JavaScript code to understand more about this.
const sample_text = document.getElementById('sample_text');
sample_text.insertAdjacentText('afterbegin', 'InsertAdjacentText() Method-');Output:
......... ADVERTISEMENT .........
..8..
The insertAdjacentText method and insertAdjacentHTML methods are the same with the position we want to insert the text.
Conclusion
We have shed light on the topic to append text to an element using JavaScript. The process is simple with the above-discussed ways. I hope this helps you get through the code.
If you find it useful, give your feedback below and also comment below if you need any help.
Leave a comment