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:
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:
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:
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.