Append text to an Element using JavaScript


Borislav Hadzhiev

Tue Jan 04 20222 min read


Photo by Shine Tang

Append text to an Element using JavaScript #

To append text to an element:

  1. Use the document.createTextNode() method to create a text node.
  2. Use the appendChild() method to append the text node to the element.
  3. The appendChild method will add the text node to the end of the element's list of children.

Here is the HTML for the examples in this article.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div id="box"> Hello <span style="background-color: salmon">world</span> </div> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

// โœ… Append text to element const box = document.getElementById('box'); const text = document.createTextNode('!!!'); box.appendChild(text); // โœ… (Alternative) Append text using insertAdjacentText box.insertAdjacentText('beforeend', '???'); // โœ… Append HTML to element box.insertAdjacentHTML( 'beforeend', '<span style="background-color: yellow"> Additional html</span>', );

We selected the element we want to append text to using the document.getElementById() method.

The next step is to create a text node using the document.createTextNode method.

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

This is especially useful when taking input from user provided data, because the method escapes HTML characters, which prevents XSS attacks from user generated input.

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

If you need to append HTML to an element and not just text, you can use this approach instead:

const box = document.getElementById('box'); box.insertAdjacentHTML( 'beforeend', '<span style="background-color: yellow"> Additional html</span>', );

The insertAdjacentHTML() method takes the following 2 parameters:

  • position - the position relative to the element of where the HTML should be inserted. Can be one of the following:

    • 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.
  • text - the string to be parsed as HTML and inserted into the DOM.

It should be noted that you shouldn't append HTML that is from user generated input without escaping it.

There is also an insertAdjacentText method you can use.

Use the insertAdjacentText() method to append text to an element, e.g. el.insertAdjacentText('beforeend', 'my text'). The method takes a position and a string as parameters and inserts a new text node at the provided position relative to the element it was called on.

const box = document.getElementById('box'); box.insertAdjacentText('beforeend', ' additional text ');

The first parameter of the insertAdjacentText method is the same as insertAdjacentHTML - the position at which we want to insert the text node.

Which approach you pick is a matter of personal preference. I'd go with the insertAdjacentText method as it is more concise and direct.

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