Thread by @UbahTheBuilder

You don't really need jQuery to manipulate the DOM. Here are 10 popular methods for manipulating the DOM 💈

1. document.querySelector(#name) //returns the 1st element from the DOM with the id of name.

2. document.getElementbyId(head) //returns an element with id of head

Next👇

3. var btn =document.querySelectors(.btn) //returns ALL elements from the DOM with a class of btn.

4. btn.addEventListener('click', foo); // calls a function (foo) anytime 'btn' element is clicked

5. btn.removeEventListener('click',foo); //detaches event listener from btn.

👇

6. var Para = document.createElement('p')
//creates a paragraph element in JavaScript. Not in DOM yet

7. var strong = document.createElement('strong');
strong.textContent = 'Hello';
p.appendChild(strong);

//textContent adds inner text
//strong is then nested inside paragraph

8. p.removeChild(strong); //removes the previously inserted strong element

9. var em = document.createElement('em');
var strong = document.querySelector('strong');
var p = document.querySelector('div');
em.textContent = 'hi';
p.replaceChild(em, strong);
// replaces strong

10. var em = document.createElement('em');
var strong = document.querySelector('strong');
var div = document.querySelector('div');
em.textContent = 'hi';
div.insertBefore(em, strong);
//Inserts em before strong inside div.

Others:
cloneNode()
getAttribute()
getAttribute()