DOM Manipulation: part II
Tags: beginners, javascript, tutorial, webdev
Published: 2022-11-30 19:18:43

In a previous article, we talked about DOM selectors, styling, text modifiers and events. Let's focus now on the following DOM concepts:

- DOM create & remove elements
- DOM classes
- DOM attributes

## DOM create & remove elements

If we want to add certain elements to our app or website with JavaScript, we can use the following methods:

document.**createElement**(name of the tag) → creates an HTML element: 

![createElement method](https://community.codenewbie.org/remoteimages/uploads/articles/o0dgcp7jqhw3oukgt3n6.png)


document.**appendChild**() or element.**append**() → adds an HTML element where we want: 

![appendChild method](https://community.codenewbie.org/remoteimages/uploads/articles/2ppmap1cs2dzbfxy5qtz.png)


document.**insertAdjacentElement**(position, element) → adds an HTML element before or after another element, in the position we indicate (afterbegin or beforeend) and using template literals. It is commonly used with lists: 

![insertAdjacentElement method](https://community.codenewbie.org/remoteimages/uploads/articles/5x3deiuiuta91hdetquj.png)


element.**remove**() → removes an element from the DOM: 

{% codepen https://codepen.io/pcrispitipina/pen/RwMyrzx %}



## DOM classes

JavaScript also allows us to play with classes to show or hide an element in the DOM. The basic methods to add and remove a class or check if an element has a class are:
- element.**classList.add**(“className”)
- element.**classList.remove**(“className”)
- element.**classList.contains**(“className”) → returns a boolean (true or false) whether the class exists or not.

Let's have a look at an easy example and see how to play with classes with JS: 

{% codepen https://codepen.io/pcrispitipina/pen/NWYBKom %}

We create the class in CSS with the styling we would like to apply to an HTML element and afterwards we simply add the class to the desired element with element.classList.add(“className”)

Another example to reveal and hide content using classes:

{% codepen https://codepen.io/pcrispitipina/pen/eYMjyBM %}

Very similar to the previous concepts is element.**classList.toggle**("className"), which adds or removes a class depending on whether the class already exists or not. Have a look at the following simple example: 

{% codepen https://codepen.io/pcrispitipina/pen/qBoyOMy %}

We can also replace a class name with a new one with: 

![remove classList](https://community.codenewbie.org/remoteimages/uploads/articles/9aj7tmpdornmco1jxo1g.png)



## DOM attributes

HTML elements can have attributes like class, id or disabled. In order to manipulate them we can use the following methods:

element.**getAttribute**(key) → takes an attribute's value: 

![getAttribute example](https://community.codenewbie.org/remoteimages/uploads/articles/foaa89b4ltjm7lrqm3s1.png)


element.**removeAttribute**(key) → removes an attribute's value. According to the previous example: 

![removeAttribute example](https://community.codenewbie.org/remoteimages/uploads/articles/rk8pygvmfjg4lp1jrs0a.png)


element.**setAttribute**(key, value) → adds an attribute and gives it a name or value: 

![setAttribute example](https://community.codenewbie.org/remoteimages/uploads/articles/5u7w6256o02nlr6yqdan.png)


element.**hasAttribute**(key) → checks if an attribute exists and returns a boolean: 

![hasAttribute example](https://community.codenewbie.org/remoteimages/uploads/articles/nocjnit9xdggbeevar5i.png)

Put in practise all DOM concepts that you have learnt with the following fun projects from Freecodecamp! 

![DOM challenges](https://community.codenewbie.org/remoteimages/uploads/articles/jzgpahnlqfkc1f61aros.png)

Find all challenges [here](https://dom-manipulation-challenges.netlify.app/).