Introduction to Web APIs: DOM Manipulation. DOM manipulation is the creation, removal or modification of content on the web page. On the screen, I currently have the HTML panel open. I'm not gonna be using this panel for this video. But behind the scenes, it does have a purpose.

First, there's an empty body element and through DOM manipulation, I will be inserting content inside of this empty body. Second, I am using the bootstrap CSS framework for our styling purposes. Now I'm gonna transition over and on the screen, I have the JavaScript panel and the output window. While working in the JavaScript panel, the output window will emulate how the page would be rendered in the browser. And I'm gonna begin by creating an element. Const divElement equals document.createElement, parentheses, and in the parentheses, I will pass an argument of div in quotes. createElement is a method that creates the specified HTML element by the tag name given, in this case div.

Next, I like to attach this empty div to the body. So I'm gonna use a query selector. Const bodyElement equals document.querySelector, parentheses and inside of the parentheses, I will pass body in quotes. Next, I will attach the div to the body. bodyElement.append. Now, append is one of the two methods that can work for this situation. The other being appendChild. Append can take multiple arguments, and those arguments can be in the form of either a Node object or a DOM string. appendChild will also work but it can only take one argument and it must be a Node object.

Both methods will insert the element as the bottom-most child of the targeted, also called the parent element. I will change appendChild back to append and pass in an argument of divElement. Now, because this div is empty, there is no content being rendered. I'm gonna create a paragraph element to insert inside of this div. Const pElement equals document.createElement passing in an argument of p for paragraph. And on the following line, I'm gonna type pElement.textContent equals This is my append paragraph.

When it comes to DOM manipulation, text content has two purposes. It can be used to capture the current text content of an element or to set the text content of an element. And here I am setting the text content. Now, there are other methods that almost work the same, such as in our HTML. Because in our HTML represents a security risk, I chose not to cover it in this video. Now I'm gonna append this paragraph to the div. divElement.append pElement and in the output window to the right, we can see this is my append paragraph.

Now, earlier in the video, I mentioned that I was using the Bootstrap framework for CSS. I wanna make this paragraph text green. And Bootstrap has a class called text-success that does exactly what I want. I'm gonna add this class to the paragraph by typing pElement.className equals text-success. And to the right, the text is green. Now, class is an attribute of an HTML element. And there are other ways to set attributes or sometimes replace attributes using Web APIs. I'm gonna type pElement.setAttribute. And inside of the parentheses, goes two arguments.

The attribute name that I'm going to create, in this case, class, and the value of that attribute. So I will type class and then the value would be text-primary bg-dark. Because the class attribute already exists, setAttribute replaces it with these new corresponding values. Had class not existed, it would have been inserted as an attribute into this paragraph element. Now to the right, I have blue text with a black background. Now if I wish to remove an attribute, there is a removeAttribute method. pElement.removeAttribute. And I'm gonna pass through class. And the text is now plain, removing all previous CSS styling. Now, what if I wanna remove an element? Well, there is a built-in remove method. I'm gonna remove the div by typing divElement.remove and to the right, there's nothing in the output. And that's it. Thanks for watching at Cloud Academy.