This site runs best with JavaScript enabled.
Do you love what we do?Become a patronat Patreon❤️

JavaScript basics: How to add and remove elements with Vanilla JavaScript

Raymon S

October 24, 2017


In the previous videos and blogs, I showed you a couple of things with getting 1 or more HTML elements via Vanilla JavaScript. This time we are going to add and remove HTML elements to our page with Vanilla JavaScript. We are gonna use the createElement, createTextNode, appendChild & removeChild methods for it.

If your not a video person, please scroll down for the written version 😉

https://www.youtube.com/watch?v=ENTuadZmDJ8&feature=youtu.be

Add element to body

First, let’s add an HTML element to our page via Vanilla JavaScript.

You create an element with the method

createElement
. Then create a text inside of it with the method
createTextNode
.

Combine them with the method 

appendChild
. After that, use the same method to add the div to the body.

Check the example code below!

HTML``` <div id="wrapper"><span>Mr Frontend</span> does JavaScript</div>```JavaScript``` var divElement = document.createElement('div');

var divText = document.createTextNode('Mr Frontend');

divElement.appendChild(divText);

document.querySelector('body').appendChild(divElement);` If you want to see this code working, please check the JS Bin on jsbin.com

Add element to parent div

If you want to add a new element to an already existing element than you have to target that element instead of the body.

Check the example code below!

JavaScript``` var divElement = document.createElement('div');

var divText = document.createTextNode('Mr Frontend');

divElement.appendChild(divText);

document.querySelector('#wrapper').appendChild(divElement);

If you want to see this code working, please check the <a class="jsbin-embed" href="http://jsbin.com/vidoroc/2/embed?html,js,output">JS Bin on jsbin.com</a><script src="https://static.jsbin.com/js/embed.min.js?4.1.0"></script>
<h2>Remove element</h2>
We also want to remove some HTML elements from our page.
It works very simple. Just target a parent element or the body, then use the method<code>removeChild</code> to remove your HTML element.
Check the example code below!
<strong>HTML</strong>

<div id="wrapper"><span class="mrfrontend">Mr Frontend</span> does JavaScript</div>`

JavaScript``` var paragraph1 = document.querySelector('#p1'); var divElement = document.querySelector('#div1');

divElement.removeChild(paragraph1);

If you want to see this code working, please check the <a class="jsbin-embed" href="http://jsbin.com/nowulit/2/embed?html,js,output">JS Bin on jsbin.com</a><script src="https://static.jsbin.com/js/embed.min.js?4.1.0"></script>
<h2>Resources W3Schools</h2>
<ul>
<li><a href="https://www.w3schools.com/jsref/met_document_createtextnode.asp">createTextNode</a></li>
<li><a href="https://www.w3schools.com/jsref/met_document_createelement.asp">createElement</a></li>
<li><a href="https://www.w3schools.com/jsref/met_node_appendchild.asp">appendChild</a></li>
<li><a href="https://www.w3schools.com/jsref/met_node_removechild.asp">removeChild</a></li>
</ul>
<h2><b>Do you need help?</b></h2>
My question for you to answer in the comments, how did you created new elements or removed HTML elements from your page in Vanilla JavaScript? Share it with me! And if you need any help, please let me know &#x1f60a;
export const _frontmatter = {"ID":1068,"title":"JavaScript basics: How to add and remove elements with Vanilla JavaScript","author":"Raymon S","excerpt":"This time we are going to add and remove HTML elements to our page with Vanilla JavaScript. With the createElement, createTextNode & removeChild.","slug":"2017/10/javascript-basics-add-remove-elements-vanilla-javascript/","published":true,"date":"2017-10-24T12:46:04.000Z"}
Do you love what we do?Become a patronat Patreon❤️
Share article