DOM Manipulation

Recently I completed my first JavaScript project using an HTML, CSS and Javascript files. I used my JS files to only write my codes and the HTML file to structure my webpage and its contents and CSS to style the elements from the HTML . I came across what I believed would be a challenge to manipulate the DOM only through my JS file, meaning I had to make something show up on my webpage without including it into my HTML file. I was a bit overwhelmed but I eventually did figure it out and it wasn’t as hard as I thought it’d be.

So for my challenge I had to make a like button appear on my webpage that increments the number every-time someone clicks on it, all in JS. I first had to create the button element using : document.createElement(“button”) and just like in HTML I had to specify the type of button and give it an id. That was the most common step in DOM manipulation to create an element to appear on the webpage. Another cool thing I learned with manipulation was “document.body.appendChild” , this command appends my like button to the body of the document, making it appear on my webpage. Overall what I learned was to incorporate a few more steps into your JS file to manipulate the document to show up on your webpage. I continued the rest of my code the same way I normally would on my JavaScript file.