JS Cheatsheet: Dom Manipulation & Event Listeners

Manipulating the DOM

Need to know

• To find an element: .querySelector(), .getElementBy()
• To add an element: .createElement(), .appendChild(), insertBefore(), .innerHTML
• To remove an element: .remove(), .removeChild()

How to use

First find an element on the page you’d like to manipulate. You can do this by looking at the source HTML file or by pressing cmd+shift+c to select an element on the page.

In this case, we’ve chosen the <div> element with an id of “dog-image-container”. For us to select this we’d use querySelector and save it to a variable for later use.

dogContainer = document.querySelector('#dog-image-container');

Now we want to add an <h1> element that says “Dog Pics”. Let us begin by creating it. let h1 = document.createElement('h1'); Now that we have the <h1> element stored in our “h1” variable let’s assign it some text. h1.innerHTML = "Dog Pics";

If you look in the console to the right you’ll see that we’ve added text to our h1 variable! But wait, it’s not on our page yet. That’s because creating an element doesn’t include it to the DOM. To do this we have to append our h1 variable to Its parent, dogContainer. There are two ways to do this; the first would be to use the appendChild method: dogContainer.appendChild(h1); By calling the method on the parent class(in this case dogContainer) you will be adding the child to the end of the parent. What if you wanted the element at the top of the container though? There’s a method for that. insertBefore() takes two arguments, the first is what element you are inserting and the second is the position you are inserting that element before.
dogContainer.insertBefore(h1,dogContainer.firstChild);

We did it! If we wanted to remove the text we’ve just created it would be as simple as calling the remove() method on the h1 variable we created: h1.remove(); This method is a shortcut as it allows us to remove the element without looking for the parent. removeChild(), however, requires both the parent and the child to work: dogContainer.removeChild(h1);

Event Listeners

Need to know:

desiredElement.addEventListener("type of event", callBackFunction())

Event listeners allow us to interact with the page. Check out the MDN documentation for a list of available events. For our purposes, we want to be able to click our new “Dog Pics” text and have it turn red. Lucky for us our desired element is already defined with our h1 variable. In our callback function, we’re defining what happens when we perform the action. We need our text to turn red.

h1.style.color = 'red';

This line of code is calling the style attribute on our h1 element and assigning it a new color, red. Now we have all of the pieces of our puzzle to write our event listener:

• desiredElement = h1
• “type of event” = “click”
• call back function = h1.style.color = ‘red’;

h1.addEventListener("click",function(event){h1.style.color = 'red';})