In this article, you will learn how to append text to an element using JavaScript by getting the element and adding a string to its .value
or .innerHTML
attribute or using the .append()
function if you’re using JQuery.
Append text to an element using JavaScript
Example of HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p id="text_id" class="text"></p>
<p class="text"></p>
<p class="text"></p>
<button onclick="append()">Input</button>
<button onclick="appendAll()">Input</button>
</body>
</html>
Using JavaScript and the .innerHTML
and .value
attribute
If you don’t know much about JQuery, simply get the desired element and set its .innerHTML
or .value
attribute.
To get the element, you use either the document.getElementById()
or document.getElementsByClassName()
function.
Though please note two things:
- The value attribute only applies to input fields/controls (
<input>
,<textarea>
), otherwise use.innerHTML
- The
.getElementById()
function returns a single element with the specifiedid
, while the.getElementsByClassName()
returns anHTMLCollection
(an array with some quirks) of elements with the sameclass
(orclassName
as defined by JavaScript)
Though to append text, simply add a string using +=
as the .innerHTML
and .value
attribute is also a string and works as one.
Code:
function append() {
const text = document.getElementById("text_id");
text.innerHTML += "LearnShareIT";
}
function appendAll() {
const texts = document.getElementsByClassName("text");
for (var i = 0 ; i < texts.length ; i++) {
var text = texts[i];
text.innerHTML += "LearnShareIT";
}
}
Output:
Though please note that the .getElementsByClassName()
function only returns an HTMLCollection
class and not an array, so something like .forEach()
or the of
keyword does not work.
Using JQuery and the .html()
and .val()
function
JQuery is a JavaScript library that simplifies many JavaScript features like document traversal, animations, event listening and handling, and attribute manipulation. If you can, learn and use JQuery.
The problem’s solution will be the same as regular JavaScript but is different in syntax and heavily streamlined. For example:
- To get an element, you use $(id/class/tag) (i.e. a selector) in which an id starts with “#” and class starts with “.”
- Instead of getting the the text and adding a string, simply use the .append() function, which appends an HTML value to the specified HTML element.
Remember that you need to set up the library before you write the code. Either download it here, or copy the line below into the <head>.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Code (1):
function append() { $("#text_id").append("LearnShareIT"); }
function appendAll() { $(".text").append("LearnShareIT"); }
Output:
Summary
To append text to an element using JavaScript, you need to get the element using the .getElementById()
or .getElementsByClassName()
function, then add a string to the text using either the .innerHTML
or .value
attribute. Though if you’re using JQuery, you use the $()
and use the .append()
function to add text.
Maybe you are interested:
- Set the “disabled” Attribute using JavaScript
- Get an Element by Name attribute using JavaScript
- Add a class to the Body element using JavaScript

Hello, my name is Davis Cole. I love learning and sharing knowledge about programming languages. Some of my strengths are Java, HTML, CSS, JavaScript, C#,… I believe my articles about them will help you a lot.
Programming Languages: Java, HTML, CSS, JavaScript, C#, ASP.NET, SQL, PHP