Loop Through and Manipulate

Lesson 6 of 13 in Coddy's JavaScript DOM Methods course.

Let's do a challenge!

Challenge

Easy

You are given HTML code that contains five paragraphs with class name item.

Using JavaScript only, modify the text of the paragraphs to be like a numbered list.

Here is the expected output:

Don't forget to refresh the web page to see the JS modifications!

Try it yourself

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <p class="item">Banana</p>
        <p class="item">Apple</p>
        <p class="item">Pear</p>
        <p class="item">Water</p>
        <p class="item">Milk</p>
        <script src="script.js"></script>
    </body>
</html>

All lessons in JavaScript DOM Methods

1Introduction

Introduction Document Object Model

2DOM Methods I

getElementById Modify Element Style getElementsByClassNameLoop Through and ManipulategetElementsByTagName querySelector

3DOM Methods II

querySelectorAll addEventListener innerHTML createElement and appendChild classList toggle