One of these things is being able to create new DOM elements.
This is how libraries like React and Vue work, they internally manage state and then manipulate the DOM by editing, creating and deleting elements from the DOM.
Creating a new DOM element
To create a new DOM element, we can use the
This method takes a string as an argument, which is the name of the element we want to create.
const element = document.createElement("div");
Once we have our element, we can do things like changing the text inside of it, the background color, or add a class to it:
const element = document.createElement("div"); element.innerText = "Hello world"; element.style.backgroundColor = "red"; element.classList.add("my-class");
Now we can just append it to the body so that we can see it on our screen:
const element = document.createElement("div"); element.innerText = "Hello world"; element.style.backgroundColor = "red"; element.classList.add("my-class"); document.body.appendChild(element);
That creates a DOM markup that looks like this:
<div class="my-class" style="background-color: red;">Hello world</div>
We can manipulate much more than just that, we can also add event listeners to our elements, and much more.
Feel free to look at the docs for more information.
In this post, we learned how to programmatically create a new DOM element, and then append it to the body.
document.createElement and pass it the tag of the elment you want to create, then you can manipulate it however you want.
Thanks for reading!
If you want to learn about web development, founding a start-up, bootstrapping a SaaS, and more, follow me on Twitter! You can also join the conversation over at our official Discord!
Leave us a message!