Creating New DOM Elements

So far we've made several changes to the elements on our page with JavaScript. 0:00 Now it's time to take it to the next level and create new elements. 0:05 You can create a new element in JavaScript with document.createElement and 0:08 passing in the name of the HTML element you wanna create as a string. 0:13 In this example we're creating a div. 0:17 So let's change our app to allow users to create new items for the list. 0:19 First we will need to add a new text input and a button here in index dot HTML. 0:24 In fact let's just copy the input and the button we wrote earlier and 0:29 paste it right below the unordered list. 0:34 And we'll need to change the classes and text content. 0:37 So the inputs class will be add item input and 0:40 the buttons class will be addItemButton 0:45 And we will write add item for the buttons text. 0:54 I'll save my index.html file and over in app.js let's select our two new elements. 1:00 So as there variable names I'll simply use their class names. 1:07 So first const addItemInput = 1:11 document.querySelector and 1:17 I'll query the selector input.addItemInput. 1:23 Go ahead and copy this constant, paste one right below and 1:32 I'll change this one to addItemButton = 1:38 document.querySelectorButton.addItemBut- ton. 1:42 And now we can add a click event listener to addItemButton as we've done before. 1:52 So at the bottom of the file we will 1:59 addItemButton.addEventListener pass and 2:03 click and function. 2:10 And inside the function, we'll create a new list element with create element and 2:21 assign it to the variable li. 2:27 So we will type let li = document.createElement li 2:29 Once the element is created we can set 2:42 the text we wanted to contain with text content. 2:44 So we wanted to take the value from the text input so 2:48 I'll type li.textContent = 2:53 addItemInput.value. 2:57 Finally let's do a little cleanup here. 3:02 Noticed that we have several buttons on the page now, but 3:05 we still have a variable named button. 3:09 So let's update this variable name to make our code more readable and meaningful. 3:12 So I'm going to change this button constant to description button. 3:17 And while we're at it we may as well change the input and p constants too. 3:26 So I'll change the input constant to a descriptionInput and 3:31 the p constant to description p. 3:36 So now in my function here all change button to 3:40 descriptionButton.addEventListener and 3:44 I'll change p to description p.innerHTML and 3:49 finally change input to descriptionInput.value. 3:53 All right, great so now when we come back to this code in a month or in a year, 4:02 it will be much easier to figure out what this code is doing. 4:06 Naming variables well is really worth putting some thought into. 4:10 All right, so I'll save my file and now if we go back to the browser, and refresh. 4:13 I'll go ahead and enter some text in the bottom field here and click add item. 4:19 And nothing happens yet. 4:24 Well that's because even though we've created the element 4:26 we haven't added it to the DOM yet. 4:30 Right now we're just creating free floating elements that exist 4:32 only in memory somewhere. 4:35 So in the next video you'll learn how to insert content into the DOM. 4:37