Manipulating HTML Elements

Introduction

Welcome to the Manipulating HTML Elements Practice Lab. In this module, you will be provided with the instructions and devices needed to develop your hands-on skills.

Exam Objectives

The following exam objective is covered in this lab:

• 4.4 Complete and debug code that locates, modifies, and adds HTML elements and attributes

Lab Duration

It will take approximately 15 minutes to complete this lab.

Exercise 1 - Creating HTML Elements Using DOM Methods

In a web application, you may come across many situations where you find the need to create your own page elements. The customized elements can be paragraphs, headers, list items, etc. Generally, a new customized element includes an element node and a text node. For example, a new paragraph element will have a supporting text node associated with it.

You can create the element and text nodes using the HTML DOM methods. The procedure you need to follow to create new elements is as follows:

Create the new element node using the method document.createElement(element). Create the new text node using the method document.createTextNode(text). Append the text node to the element node using the method node.appendChild(node). Once the element is created, you can set its attributes using the method element.setAttribute(attribute, value).

In this exercise, you will develop a To Do List page and learn to create new elements and set its attributes. The first task will be to create a new folder named ToDoList on PLABWIN10 desktop, add the folder to Visual Studio Code workspace, and save the workspace with the name ToDoList. You will create a new HTML page named ToDoList.html in the ToDoList workspace.

In the second task, you will write JavaScript code to create HTML elements using the DOM methods on the page. You will embed the code in the HTML page and run the page in Google Chrome web browser.

Learning Outcomes

After completing this exercise, you will be able to:

• Create HTML elements using the DOM methods