From the course: JavaScript Essential Training
Unlock the full course today
Join today to access over 23,400 courses taught by industry experts.
Challenge intro: Create elements - JavaScript Tutorial
From the course: JavaScript Essential Training
Challenge intro: Create elements
- [Instructor] In this challenge, you'll create new DOM elements and populate them with content, specifically a navigation menu with a list of links. In the challenge code, an existing DOM has been set up for you, but it's happening behind the scenes, so you can't get direct access to it in the browser and take a look at it. That DOM contains a header element with the class siteheader and that's where you'll append the new menu. You also have a JavaScript template literal containing list items that will be used in the navigation menu. So you can just append this list of items into an unordered list as you go along. Your task is to add the list items to an unordered list, then add the unordered list to a nav container. Then give the nav container the class .main-navigation and finally append the new nav container to the existing element with the class .siteheader. The final HTML of your nav element should follow…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
DOM: The Document Object Model4m 7s
-
(Locked)
Access elements with querySelector methods6m 6s
-
(Locked)
Access elements using older methods3m 45s
-
(Locked)
Practice: Find an element1m 29s
-
(Locked)
Modifying element classes4m 53s
-
(Locked)
Attributes4m 13s
-
(Locked)
Inline style3m 52s
-
(Locked)
Practice: Modify classes and attributes, and styles1m 36s
-
(Locked)
Add DOM elements5m 25s
-
(Locked)
Challenge intro: Create elements1m 17s
-
(Locked)
Solution: Create elements3m 35s
-
-
-
-
-
-
-