Lecturer: 0:00 All right. For the extra credit of this one, we wanted to generate the root node. Instead of having the root node in the HTML as we have here, I just want to play around with generating that using JavaScript as well.

0:12 There are various ways that you can go about doing this. This one's mostly just for fun, but what we're going to do is instead of getting the element by its ID, we're going to need to create the element. We'll call that div, and then we can get rid of it here.

0:25 Then all that we need to do is say document.body.append, rootElement, and we're done. We create the element ourselves rather than letting the browser create it for us. Then we can append it ourselves just by appending it directly to the body.

0:39 If I save that, it works just fine, just exactly as I had before except now, I'm actually doing the creating of that root element DOM node and appending that to the body. Then we append this element to that DOM node that I created.

0:57 You'll also notice that I don't have that ID in here anymore. If we want it to add that ID, then we can say rootElement.setAttribute, ID root. We save that, and, tada, there it is the ID of root. Perfect.

1:11 In review, all that we did here is we removed the div with the ID of root here, which is the browser. Would then turn into a DOM node that we could reference and instead, we created an element and then appended that element to the body.

1:26 This extra credit was just for fun. Typically, I'm not actually going to create the root element. I'm actually going to have that root element be inside of the HTML document and then reference it like we were before.

1:37 The cool thing is that you can do this thing and you do occasionally do this thing with React, especially when we're talking about portals and stuff which you'll learn about in the future.