Adding an element to the DOM

To add a new element to the DOM you have to know where you want to put it. Well, we do know where to put it: we’re going to put the <li> element in the <ul> element. But how do we do that? Let’s take another look at the DOM. Remember how we said it was like a tree? Think family tree:

So, to add our <li> element, we need to make it a child of the <ul> element. To do that, we first need to find the <ul> element in the tree (we gave it an id of “playlist” to make that easy) and then to add the <li>, we tell the <ul> element to add a new child to itself. Here’s how we do that: