To connect up the elements created, you need to write code that appends elements to other elements. In this video, use the appendChild method to create parent-child relationships between the elements and attributes created, and to append the virtual DOM to the DOM tree.
- [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 paragraphs…as children of the container div.…
- Replacing jQuery Ajax requests with Fetch requests
- Implementing data binding
- Replacing simple animations
- Ensuring backwards compatibility