Append text to a Div element using JavaScript

avatar

Borislav Hadzhiev

Tue Jan 04 20222 min read

banner

Photo by Evan Krause

Append text to a Div element using JavaScript #

Use the insertAdjacentText() method to append text to a div element, e.g. container.insertAdjacentText('beforeend', 'your text here'). The method inserts a new text node at the provided position, relative to the element it was called on.

Here is the HTML for the examples in this article.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div id="container"> Apple, <span style="background-color: yellow">Pear</span>, Banana </div> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const container = document.getElementById('container'); // โœ… Append text to `div` element container.insertAdjacentText('beforeend', ', Kiwi, Melon'); // โœ… Append HTML to `div` element container.insertAdjacentHTML( 'beforeend', `<span style="background-color: lime">, Avocado</span>`, );

We selected the div element using the document.getElementById() method.

The insertAdjacentText method takes the following 2 parameters:

  1. position - the position relative to the element of where the text should be inserted. Can be one of the following 4:
  • beforebegin - before the element itself.
  • afterbegin - just inside the element, before its first child.
  • beforeend - just inside the element, after its last child.
  • afterend - after the element itself.
  1. data - the string from which to create a new text node to insert at the given position.

In the example, we inserted text just inside the div element, after its last child, but you can tweak the first parameter depending on your use case.

An alternative and more manual approach is to create a text node and append it to the div element.

index.js
const container = document.getElementById('container'); const text = document.createTextNode(', Kiwi, Melon'); container.appendChild(text);

The createTextNode method takes a string and creates a text node from it.

The method escapes HTML characters, so you don't have to worry about XSS attacks when working with user generated input.

The next step is to use the appendChild method to append the text node to the end of the element's list of children.

If you need to append HTML to the div element, you can use the insertAdjacentHTML method.

index.js
const container = document.getElementById('container'); // โœ… Append HTML to element container.insertAdjacentHTML( 'beforeend', `<span style="background-color: lime">, Avocado</span>`, );

The first parameter the method takes is the same as with insertAdjacentText - the position at which the HTML should be inserted.

The second parameter is an HTML string.

This method shouldn't be used with user provided input without it being escaped, as it would be a cause for security concerns.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee