andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update top JS snippets

Browse Source
This commit is contained in:
Chalarangelo
2021-10-13 20:09:28 +03:00
parent 2b775e3c93
commit 3cd481c0d1
19 changed files with 45 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
snippets/renderElement.md
View File

@ -2,14 +2,14 @@
title: renderElement
tags: browser,recursion,advanced
firstSeen: 2020-05-03T11:55:42+03:00
lastUpdated: 2020-11-03T22:11:18+02:00
lastUpdated: 2021-10-13T19:29:39+02:00
---
Renders the given DOM tree in the specified DOM element.
- Destructure the first argument into `type` and `props`, using `type` to determine if the given element is a text element.
- Destructure the first argument into `type` and `props`. Use `type` to determine if the given element is a text element.
- Based on the element's `type`, use either `Document.createTextNode()` or `Document.createElement()` to create the DOM element.
- Use `Object.keys()` to add attributes to the DOM element and setting event listeners, as necessary.
- Use `Object.keys()` to add attributes to the DOM element and set event listeners, as necessary.
- Use recursion to render `props.children`, if any.
- Finally, use `Node.appendChild()` to append the DOM element to the specified `container`.