1var newDiv = document.createElement('div');
2newDiv.innerHTML = '<p>Hello World!</p>';
3document.body.appendChild(newDiv);

1DOM Manipulation Checklist
2************************** 
3
4- Do you know what DOM is and its use in JavaScript ? 
5  - DOM - Document Object Model - is a programming interface for HTML documents. It is used to represent the page so that programs can change the document structure, style, and content
6  - DOM is created by the browser when a web page is loaded. In graphical form, it's like a tree of elements also called nodes, which are used to represent every single element on the page. All the DOM of our webpage sits inside the document object. Programmatically, this model allows us to read or even change the content of our page via JavaScript.
7
8  Reference:
9  Adugna:  https://youtu.be/6XtDRvdF9M4?t=267 
10  External: https://youtu.be/l-0nPnSvbX8 
11
12- Do you know why we need JavaScript for DOM manipulation?
13  - The main reason we include JavaScript in our HTML is to add instructions on how it should respond to an action taken on the browser. In other words, to add interactivity on the page.
14
15  Reference:
16  Adugna:  https://youtu.be/oMq2pLNIeC0?t=1029 
17
18- Do you know why we have to understand DOM?
19  - Your job as a JavaScript front end developer is to select and update the DOM elements when a user interacts with a website. DOM is what lets you do this using JavaScript.
20
21- Do you know some of the actions of DOM in JavaScript?
22  - Change/Remove HTML elements in the DOM/on the page.
23  - Change and add CSS styles to elements
24  - Read and change attributes (href, src, alt), etc.
25  - Create new elements and insert them into the DOM/page.
26  - Attach event listeners to elements (click, keypress, submit)
27
28- Do you understand and distinguish the four kinds of nodes in a DOM tree?
29Answer:
30  - Document Node - Represent the entire page which contains multiple elements in it. 
31  - Element Node- Represent each HTML tag that are used in the HTML code. 
32  - Attribute Node - These are nodes to model  the attribute of HTML elements, for instance <img src = “ ” width = “” alt = “” > 
33  - Text Node - These are the text content of the HTML element. 
34
35  Reference: 
36  Adugna’s: https://youtu.be/6XtDRvdF9M4?t=954  
37  External: https://www.youtube.com/watch?v=y3itGTCseAk 
38
39- Do you know how to select an individual element using getElementById() method?
40
41  - getElementById()- method returns the element that contains the name id passed. And in case we do not have any id with that specific name, it returns null.
42
43  Reference:
44  Adugna’s: https://youtu.be/6XtDRvdF9M4?t=3386 
45
46- Do you know how to select an individual element using querySelector() method?
47
48  - querySelector()-method returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.
49
50  Reference:
51  Adugna’s: https://youtu.be/6XtDRvdF9M4?t=3863  
52
53
54- Do you know how to select an individual element by traversing between multiple elements?
55
56  - You can traverse from one element to another by using properties like parentNode, previousElementSibling, nextElementSibling,firstElementChild and lastElementChild.
57
58  Reference:
59  Adugna’s: https://youtu.be/6XtDRvdF9M4?t=5682 
60
61
62- Do you know how to select multiple elements using getElementsByClassName() method?
63
64  - getElementsByClassName()-method returns an HTMLCollection of all those elements containing the specific name class passed.
65
66  Reference:
67  Adugna’s: https://youtu.be/6XtDRvdF9M4?t=4604   
68
69- Do you know how to select multiple elements using getElementsByTagName() method?
70
71  - getElementsByTagName()-method returns an HTMLCollection of all those elements with the tag name passed.
72
73  Reference:
74  Adugna’s: https://youtu.be/6XtDRvdF9M4?t=4783    
75
76- Do you know how to select multiple elements using the querySelectorAll() method?
77
78  - querySelectorAll()-method returns all elements in the document that matches a specified CSS selector(s), as a static NodeList object. The NodeList object represents a collection of nodes. The nodes can be accessed by index numbers. 
79
80  Reference:
81  Adugna’s: https://youtu.be/6XtDRvdF9M4?t=4604   
82
83
84- Do you know how to alter(change) values and properties? 
85
86  - Altering a specific text node:You use the property "nodeValue" and “textContent” to access or update content of a text node
87
88  - Working with HTML content: when you want to add, update or remove blocks of HTML code from your page, you use the methods like createElement(), innerHTML, textContent, appendChild() and removeChild().
89
90  - Working with attributes:when you want to add, update or remove the attribute value of an element, you use the methods like className, classList, id, hasAttribute(), getAttribute(), setAttribute(), removeAttribute().
91
92  Reference:
93  Adugna:  https://youtu.be/GnIrZP6-MbE?t=56

1// Add new item to end of list
2var list = document.getElementsByTagName('ul')[0];
3var newItemLast = document.createElement('li');
4var newTextLast = document.createTextNode('Item 2');
5newItemLast.appendChild(newTextLast);
6list.appendChild(newItemLast);

1// Add new item to start of list
2var newItemFirst = document.createElement('li');
3var newTextFirst = document.createTextNode('New List Item');
4newItemFirst.appendChild(newTextFirst);
5list.insertBefore(newItemFirst, list.firstChild);

1const myChildElemet = myElement.querySelector('input[type="submit"]')
2
3// Instead of
4// document.querySelector('#foo > div.bar input[type="submit"]')
5

1myElement.matches('div.bar') === true
2