Challenge: Add HTML Tags and Bind Data

Make three `h1` tags inside the `body` tag in an HTML webpage, and bind data elements of an array with an HTML DOM element.

We'll cover the following

Problem statement

In this challenge, we will test your knowledge of what we have covered so far.

The tasks in this challenge are as follows:

  • Create three new h1 tags inside the body tag in the HTML file.
  • Bind the given array of data with each h1 tag.
  • Show the data that is mapped with the HTML DOM elements on the output screen.

Note: You have to create three h1 tags using DOM manipulation.

Given Data

An array of data and an HTML page

var mydata=["London","New york","Paris"]

<head>
	<script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
</body>
</html>

Expected Output

The expected output is the names of the cities in the output tab after binding them with li tags.

Output:

London

New York

Paris

Coding exercise

The problem is designed to check your understanding, so you are encouraged to solve it on your own. If you are completely stuck, then refer to the next lesson which will explain the solution in detail.

Coding exercise