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.