How to Append or Add text to a DIV element using JavaScript

← PrevNext →

I have explained jQuery .append() and .appendTo() methods in my previous articles, which also serves the same purpose. However, if you want to stick to pure JavaScript to append or add text, contents etc. to a <div> element, then this post is for you.
See this demo

There are two different methods in JavaScript, using which you can easily add text or contents to a <div> element, dynamically. I am sharing examples showing both the methods.

Add text to DIV using innerHTML Property in JavaScript (Method 1)

Using the innerHTML property, you can add new content to a <div>, which is either empty or it already, has some content in it. For example,

<!DOCTYPE html>
<html>
<head>
    <title>Add text to DIV using JavaScript</title>
</head>
<body>
    <p>
    	<input type='button' onclick='fillData()' value='Fill Div with Data'>
    </p>
    
  	<div id='container'>
    	<p>
        	Content inside p element.
        </p>
    </div>
</body>
<script>
    let fillData = () => {
        let ele = document.getElementById('container');
        ele.innerHTML += 'Hello, I am Arun';
    }
</script>
</html>
Try it

This innerHTML property will allow you to add text, markup and styles to the element. Well it means, I can append tags like <b> or <span> etc. to the content Hello, ….

There’s another important thing, which is worth explaining is the use of +=, immediately after .innerHTML. This will allow you to add (in-fact append) new contents with other contents or elements that already exists inside the <div> element. See the above example, I already have a <p> element with some contents in it.

Add text to DIV using appendChild() Method in JavaScript (Method 2)

You can also use the appendChild() method in JavaScript to add text or contents to a <div>. However, it works differently from innerHTML property that I have explained in the first example.

With innerHTML, you can directly provide texts, markups, style etc. to the element. With appendChild(), you have to create node (a text node here) for the parameter, to append the contents to the <div>. Here’s how this is done.

<!DOCTYPE html>
<html>
<head>
    <title>Add text to DIV with appendChild() Method</title>
    <style>
    	body, input {
            font: 17px Calibri;
        }
    </style>
</head>
<body>
    <p>
    	<input type='button' onclick='fillData()' value='Fill Div with Data'>
    </p>
    
  	<div id='container'>
    	<p>
            Content inside p element.
        </p>
    </div>
</body>
<script>
    let fillData = () => {
        let ele = document.getElementById('container');
        
        let node = document.createTextNode ('Hello, I am Arun');
        ele.appendChild(node);
    }
</script>
</html>
Try it

This too will serve the purpose, that is, add text to a <div> element. However, using this method you can only add plain texts. You cannot add additional markups or style to the text.

Conclusion

Both the methods, that I have described above has its pros and cons. Use it judiciously, as both fits in different situations. Remember, if you are using innerHTML property to add extra or new content to an existing content, use “+=” after the property. Or else, it will remove all content along with elements (nodes etc.) and add completely new content the element.

ele.innerHTML = 'Hello, I am Arun'; // will add completely new content and remove previous content

ele.innerHTML += 'Hello, I am Arun'; // will add new content with existing content

See this demo

Hope, you find this post useful. Thanks for reading .

← PreviousNext →


Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.
Delivered by FeedBurner