. DOM manipulation

Document Object Model also known as the DOM is an API where languages like Javascript, HTML, and CSS is used to create the display, interactions such as clicks and mouseovers, and access to the data the client is trying to access. We will be using JavaScript to demonstrate how the DOM is manipulated for a successful experience.

We will be adding a button feature to our web browser to remove an element from the screen and our database.

We will first need to query select the exact HTML element we want to manipulate. you can query select a .class or #id.

Notice we linked this id grab to a variable which will be helpful if that specific element needs to be grabbed and accessed else where. I recommend declaring your variables globally to avoid declaring and grabbing the same element multiple times.

Now we will need to create our button and have it appear on our app. We will do this by using the createElementMethod() and .textContent. CreateElement allows us to create a tag and add to our index.Html code. While .textContent() is what the button will appear to be once added to the DOM hence why we added an x to allow the user to know this will be a clicable button to delete.

Remember to console .log everything just to be sure we our grabbing and creating the right thing. Below I have consol.log our newly created button.

Lastly we will add it to our DOM using .append() method , we use this method to to added to the parent node which holds the a spot on our DOM essentially.

Now you should see a button for each photo in our list div with a X button.