How to Append Text to a DIV using JavaScript?

To append text to a div element in JavaScript, you can use the innerText property of the HTMLElement interface. The element.innerText property is used to set or get the text content of an HTML element.

When the innerText property is used as a getter, it gives you the text inside the element including all child elements’ text also. But when used as a setter, it replaces all the child elements with the new text.

Let’s take an example and try to understand it.

Suppose we have an empty div element along with a button in our HTML file. We want to append some text to the div as soon as we click the button:

<!-- The target div element -->
<div id="myDiv"></div>

<button id="myBtn">Append Text</button>

Now, to add text to the div, use the innerText property:

let div = document.getElementById('myDiv');
let button = document.getElementById('myBtn');

// Fires on button click
button.addEventListener('click', function(event){

    // Append text to the div
    div.innerText = 'This is some random text.';

});

After running the above code, you will get the following output:

Append text to a div with innerText property

As you can see from the above output, the new text is added to the div as soon as we click the ‘Append text’ button.

Note: While using the innerText property to append text to a div or any other element, you have to keep in mind that the new text will replace all the existing child elements of the element.


Method 2: Using the appendChild() Method

You can also use the appendChild() method of the DOM to append text to a div element. The appendChild() method is used to append a new child element to an existing element.

The main advantage of the appenChild() method over the innerText property is that it does not replace the existing child elements with the new text, instead, it just appends the new text/child to the existing child list of the element.

Let’s take the same example again but with some existing text inside the div:

<!-- The target div element -->
<div id="myDiv">Existing text </div>

<button id="myBtn">Append Text</button>

Now, to append the new text to the div using the appendChild() method, we have to first create a text node with the help of the createTextNode() method and then append it to the target div.

See the implementation in the following example:

let div = document.getElementById('myDiv');
let button = document.getElementById('myBtn');

// Fires on button click
button.addEventListener('click', function(event){

    // Create the text node
    let textNode = document.createTextNode('This is some random text');

    // Append text node to the div
    div.appendChild(textNode);

});

Below is the outcome of the above code:

Append text to a div with appendChild() method

As you can see from the above output, the new text is appended to the div without removing the existing text.


Method 3: Using the innerHTML Property

The innerHTML property is almost similar to the innerText property. The only difference is that it can also get/set the HTML content to an element along with the text content.

If you use the innerHTML property as a getter, it will give you all the children of the element as an HTML string. Whereas, if you use it as a setter, it will append the given text or the HTML element to the target element as a child.

Let’s take the same example once again and try to append some text to the div:

<!-- The target div element -->
<div id="myDiv">Existing text </div>

<button id="myBtn">Append Text</button>

Let’s try to add some plain text as well as bolded text i.e. <b></b> to the div with the help of the innerHTML property:

let div = document.getElementById('myDiv');
let button = document.getElementById('myBtn');

// Fires on button click
button.addEventListener('click', function(event){

    // Append plain text & bold text to the div
    div.innerHTML = 'This is some random text. <b>This is bolded text</b>';

});

Below is the outcome of the above program:

Append text to a div with innerHTML property

As you can see from the above output, the text without any HTML tags is added as plain text whereas the text inside the <b></b> tags is added as bolded text to the div.


Conclusion

In this article, we learned how we can append text to a div element with JavaScript.

There are actually various methods that you can use to append text to a div in JavaScript. For example, if you only want to append the plain text, you can use the innerText property, if you want to append plain text as well as HTML elements, you can use the innerHTML property.

Additionally, if you don’t want to replace the existing text/HTML with the new text/HTML, you can use the appendChild() method in combination with the createTextNode() method.

Happy Coding.

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

    View all posts