Skip to main content Accessibility Feedback

Adding markup to an element with vanilla JS

The other day one of the students in my Vanilla JS Slack channel asked me how to add an element inside another element with JavaScript.

This is actually really easy to do with the innerHTML property.

// <div id="some-element">...</div>
var elem = document.querySelector('#some-element');

// Get the current markup
var html = elem.innerHTML;

// Replace the current markup
elem.innerHTML = '<p>Some new content.</p>';

// Add content before the current markup
elem.innerHTML = '<p>Some new content.</p>' + elem.innerHTML;

// Add content after the current markup
elem.innerHTML += '<p>Some new content.</p>';

The content you add can be any valid HTML, including just plain old string of text (no paragraph tags required).

Next, learn how to add a new element to the DOM with vanilla JS.

🚀 I just relaunched my Vanilla JS Pocket Guides with new code examples and real projects to help tie everything you’ll learn together. Check it out.

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

Get Daily Developer Tips