How To Append Text To An Element Using JavaScript

Posted on by Davis Cole
append text to an element using JavaScript

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 specified id, while the .getElementsByClassName() returns an HTMLCollection (an array with some quirks) of elements with the same class (or className 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:

function append_js() { const text = document.getElementById(“text_id_js”); text.innerHTML += “LearnShareIT”; } function appendAll_js() { const texts = document.getElementsByClassName(“text_js”); for (var i = 0 ; i < texts.length ; i++) { var text = texts[i]; text.innerHTML += “LearnShareIT”; } }

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:

function append_jquery() { $(“#text_id_jquery”).append(“LearnShareIT”); } function appendAll_jquery() { $(“.text_jquery”).append(“LearnShareIT”); }

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:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *