TLDR; You can use
document.createElement() to create new elements.
When using the
createElement() function you can pass the element you can to create, but you don't need to pass in the brackets
document.createElement('div'); document.createElement('aside'); document.createElement('custom');
As you can see it allows known HTML element or even custom elements.
These however will not get added to the dom directly. We can console log them to see what's happening.
Let's create a full element and add it to the dom now.
let div = document.createElement('div'); div.textContent = `I'm created`; div.style.backgroundColor = 'red'; div.id = 'custom_id'; document.body.appendChild(div);
And this will actually append a red div to our dom. The red div will have a custom ID even.
Pretty cool right? You can try this out yourself in the following Codepen.
Thank you for reading, and let's connect!
Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter