How To Append Text To A Paragraph Element Using JavaScript

Posted on by Tom Joseph
Append text to a Paragraph element using JavaScript

JavaScript supports many methods to append text to a Paragraph element. Each method describes different ways of working. See the article below to implement it.

How to append text to a Paragraph element using Javascript

Use insertAdjacentText() method

The insertAdjacentText() method is a built-in function in JavaScript. This is a very useful function to find and join pieces of text.

Syntax

insertAdjacentText(location, text)

Parameters

  • location: The paragraph position where you need to add text content.
  • text: The text content you need to add to the paragraph.

This is a pretty straightforward method to use, which I’ll show you shortly.

In the index.html file, I have a paragraph “We are LearnShareIT!!” as follows:

<!DOCTYPE html>
<html lang="en">
    <head>
      	<meta charset="UTF-8" />
    </head>
    <body>
        <div class="box">We are LearnShareIT!!</div>

        <script src="main.js"></script>
    </body>
</html>

To add any text content before that phrase in the main.js file, we do the following:

// Query element with 'box' class 
var boxNode = document.querySelector('.box');

// Add "Hi, " before paragraph
boxNode.insertAdjacentText('afterbegin', 'Hi, ');

console.log(boxNode.innerHTML);

Output:

Hi, We are LearnShareIT!!

Firstly, I will get the element whose class is ‘box’. Then I add the text content of “Hi, ” in front of the paragraph. ‘afterbegin’ here means that the paragraph will come after the text content to be added.

Use innerText attribute

This is an exciting point between Javascript and HTML; innerText is a suitable attribute for appending text to a Paragraph element. It follows the DOM model, can be used in many different ways, and is very flexible in this case.

Syntax

boxNode.innerText = text;

Parameters

  • boxNode: The element to append text to a paragraph.
  • text: Input content to be displayed.

Note: text is the final string stored and displayed on the user interface. Therefore, in order not to lose the original paragraph, we must use the following flexible syntax:

boxNode.innerText = text + boxNode.innerText;

This means I will add the value to the original value, so my paragraph will be whole.

To better understand, see the following example:

In the index.html file:

<!DOCTYPE html>
<html lang="en">
    <head>
      	<meta charset="UTF-8" />
    </head>
    <body>
        <div class="box">We learn at </div>

        <script src="main.js"></script>
    </body>
</html>

I have a div tag with the class is ‘box’ and body text is “We learn at“. I want to append a string to this text so that it becomes a phrase “We learn at LearnShareIT!!“, so I edit the main.js file as follows:

// Query element with 'box' class
var boxNode = document.querySelector('.box');

// Add text content
boxNode.innerText = boxNode.innerText + ' LearnShareIT!!';

// Show the result
console.log(boxNode);

I query to get the element containing the text I want to edit. Then I add the content inside it with the string I need to concatenate. I finally displayed it with the console.log() command.

Output

We learn at LearnShareIT!!

Summary

Those are the two best ways to append text to a Paragraph element using JavaScript. Any method has its advantages and disadvantages. Follow the steps to get it right.

Maybe you are interested:

Related Posts

Leave a Reply

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