Introduction to Web APIs: DOM Manipulation


DOM Manipulation

The course is part of this learning path

Introduction to Web APIs: DOM Manipulation

This practical course offers an introduction to DOM Manipulation through the use of Web APIs.

Learning Objectives

In this course, you will learn how to:

  • create an element
  • append elements to other elements
  • set an element's text content
  • set an element's class
  • set an element's attribute
  • remove an element's attribute
  • remove an element from the DOM

Intended Audience

This course is intended for anyone who wants to learn about Web APIs and DOM manipulation.


Anyone with an interest in Web APIs and DOM manipulation in general.

The following course is a primer on Web APIs and the DOM:
Introduction to Web APIs and the DOM



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.

About the Author
Learning Paths

Farish has worked in the EdTech industry for over six years. He is passionate about teaching valuable coding skills to help individuals and enterprises succeed.

Previously, Farish worked at 2U Inc in two concurrent roles. Farish worked as an adjunct instructor for 2U’s full-stack boot camps at UCLA and UCR. Farish also worked as a curriculum engineer for multiple full-stack boot camp programs. As a curriculum engineer, Farish’s role was to create activities, projects, and lesson plans taught in the boot camps used by over 50 University partners. Along with these duties, Farish also created nearly 80 videos for the full-stack blended online program.

Before 2U, Farish worked at Codecademy for over four years, both as a content creator and part of the curriculum experience team.

Farish is an avid powerlifter, sushi lover, and occasional Funko collector.

Covered Topics