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

Append elements with vanilla JavaScript - JavaScript Tutorial

From the course: Learning App Building with Vanilla JavaScript

Start my 1-month free trial

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…

Contents