From the course: Learning App Building with Vanilla JavaScript
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Append elements with vanilla JavaScript - JavaScript Tutorial
From the course: Learning App Building with Vanilla JavaScript
Append elements with vanilla JavaScript
- [Narrator] Our code creates and customizes a number of new elements. But, each of these elements is separate, disconnected from each other and from the DOM. To connect everything up, we need to write code that appends elements to other elements. Each element has an appendChild method. We pass in a reference to a new child element, which is then appended. Now for our app we already know the document structure we need which is represented in the jsx code in the commented out react components. So for the first one around line 79, we've created a div, two P elements, and an image element. Now the image element with the icon image variable name needs to be nested within the paragraph in the conditionsPara variable. So I can create a new statement referencing the parent element which is conditionsPara and its appendChild method, and then just pass in a reference to iconImage. And this results in the image being appended as a child to the paragraph. So likewise, I can append the two…
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.