Skip to main content Accessibility Feedback

Creating elements with vanilla JavaScript

In jQuery, you can create an element by wrapping element tags in a jQuery method:

var elem = $('<div></div>')

Did you know it’s just as easy to create element with vanilla JavaScript? Let’s take a look!

createElement() #

The createElement() method does exactly what it says: creates an element. Unlike the jQuery version, you don’t even need opening or closing tags.

var div = document.createElement('div');
var link = document.createElement('a');
var article = document.createElement('article');

You can use an valid HTML tag, and even create invalid ones, too! For example, these also work.

var chicken = document.createElement('chicken'); // <chicken></chicken>
var placeholder = document.createElement('_'); // <_></_>

createElement() should always be called on the document.

Over the next few days, I’ll be teaching you a few ways to inject elements you create into the DOM.


🚀 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