Skip to main content Accessibility Feedback

Two ways to get and set HTML content with vanilla JavaScript

Vanilla JavaScript provides two really easy ways to get and set content in the DOM—one to manipulate markup, and the other just for text.

Manipulating HTML #

You can use the innerHTML to get and set HTML content in an element.

var elem = document.querySelector('#some-elem');

// Get HTML content
var html = elem.innerHTML;

// Set HTML content
elem.innerHTML = 'We can dynamically change the HTML. We can even include HTML elements like <a href="#">this link</a>.';

If you want to add HTML after what’s already in an element instead of replacing it entirely you can use +=.

// Add HTML to the end of an element's existing content
elem.innerHTML += ' Add this after what is already there.';

And you can add HTML before what’s already in an element by adding + elem.innerHTML to the end.

// Add HTML to the beginning of an element's existing content
elem.innerHTML = 'We can add this to the beginning. ' + elem.innerHTML;

Manipulating just text content #

The innerHTML property works great, but what if you just want to get or set content without the markup?

For that, there’s textContent. It works just like innerHTML, but only gets content, and will ignore HTML tags.

var elem = document.querySelector('#some-elem');

// Get text content
var text = elem.textContent;

// Set text content
elem.textContent = 'We can dynamically change the content.';

// Add text to the end of an element's existing content
elem.textContent += ' Add this after what is already there.';

// Add text to the beginning of an element's existing content
elem.textContent = 'We can add this to the beginning. ' + elem.textContent;

Browser Compatibility #

Both innerHTML and textContent work in all modern browsers, and IE9 and up.


🚀 Make 2018 the year you master JavaScript! My pocket guides and mini courses are short, focused, and made for beginners. You can do this!

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips