Append text or HTML to Element (DIV, SPAN, P) in JavaScript

# Table of Contents

# Append text to an Element (DIV, SPAN, P) in JavaScript

To append text to an element:

Use the document.createTextNode() method to create a text node.
Use the appendChild() method to append the text node to the element.
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.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>
  </head>

  <body>
    <div id="box">
      bobby <span style="background-color: salmon">hadz</span>
    </div>

    <script src="index.js"></script>
  </body>
</html>

And here is the related JavaScript code.

index.js

Copied!
// ✅ Append text to element
const box = document.getElementById('box');
const text = document.createTextNode(' tutorial');
box.appendChild(text);

append text to div element

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 user-provided data because the method escapes HTML characters and prevents XSS attacks.

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

This approach can be used to append text to any element, e.g. div, span, paragraph, etc.

Alternatively, you can use the insertAdjacentText method.

# Append text to an element (DIV, SPAN, P) using `insertAdjacentText()`

You can also use the insertAdjacentText method.

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.

index.js

Copied!
const box = document.getElementById('box');

box.insertAdjacentText('beforeend', ' new text');

append text to div insert adjacent text

The insertAdjacentText method takes the following 2 parameters:

position - the position relative to the element 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.

data - the string from which to create a new text node to insert at the given position.

You can use the insertAdjacent method to append text to an element of any type, e.g. div, span, paragraph.

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

# Append HTML to an element (DIV, SPAN, P) in JavaScript

If you need to append HTML to an element and not just text, use the insertAdjacentHTML method.

index.js

Copied!
const box = document.getElementById('box');

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

append html to div element

The insertAdjacentHTML() method takes the following 2 parameters:

position - the position relative to the element 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.

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

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Append text or HTML to Element (DIV, SPAN, P) in JavaScript

# Table of Contents

# Append text to an Element (DIV, SPAN, P) in JavaScript

# Append text to an element (DIV, SPAN, P) using insertAdjacentText()

# Append HTML to an element (DIV, SPAN, P) in JavaScript

Borislav Hadzhiev

# Append text to an element (DIV, SPAN, P) using `insertAdjacentText()`