Sometimes, we want to replace a text node with HTML text in JavaScript.

In this article, we’ll look at how to replace a text node with HTML text in JavaScript.

How to replace a text node with HTML text in JavaScript?

To replace a text node with HTML text in JavaScript, we can set the innerHTML property of the element to the HTML we want.

For instance, we write:

<span>
  https://example.com
</span>

to add a span.

Then we replace the HTML inside the span by writing:

const span = document.querySelector('span')
span.innerHTML = `<a href='${span.textContent}'>${span.textContent}</a>`

We get the span with querySelector.

Then we set the innerHTML property of the span to the HTML we want to replace it with.

As a result, we see the link rendered in the span.

Conclusion

To replace a text node with HTML text in JavaScript, we can set the innerHTML property of the element to the HTML we want.