Getting and Setting Text with textContent and innerHTML

[MUSIC] 0:00 All right, it's time to start shaking things up a little more on the web page, 0:04 starting with how to read and change text. 0:08 In this video, I'll show you two DOM element properties, textContent and 0:10 innerHTML. 0:15 Each has its own approach to the DOM, and I'll explain when you'd want to use them. 0:16 So first, let's look at the textContent method. 0:20 As with many of the methods I'll show you, 0:24 you can use textContent to either read or set text values of elements. 0:27 And to follow along with me, launch the workspace for this video or 0:32 you can download the project files and use your preferred text editor. 0:34 So in the latest project files, 0:39 the index.html file is similar to the one from the previous stage, 0:40 except that I've removed the list items with the class error, not purple. 0:44 And we have a blank app.js file. 0:49 But again, you can still view all the code written up to this point when you download 0:52 the project files. 0:55 So now let's see how to use the text content method to do just that, 0:57 return the text content of a node. 1:01 So I'm on the web page we've been working on. 1:04 And I have my console open. 1:07 So I'm going to select the heading element and get its text. 1:09 I'll assign the element to the variable myHeading using querySelector. 1:14 So I'll type document.querySelector, then pass the h1 selector. 1:21 So first, let's read the heading with myHeading.textContent. 1:31 And, as you can see, we get the heading's text back, JavaScript and the DOM. 1:38 Now if we assign a string to textContent, we can also change the heading text. 1:42 So let's change it by typing myHeading.textContent 1:48 = "This is a new heading". 1:54 So now let's move into our workspace and 2:01 use textContent to make our app a little more interesting. 2:03 Let's create an input to change the kind of list we're making. 2:07 So in index.html, 2:10 I'm going to add an input and button element below the paragraph. 2:12 And I'll give both elements the class description. 2:17 Right below the input, I'll add a button with the class description. 2:29 The button will say, Change list description. 2:37 And I'm also going to give the second paragraph here the class description. 2:43 So now over in app.js, let's select the elements we'll need, namely the paragraph, 2:52 text input, and button, and assign them to const variables. 2:57 So first, I'll select the input with const 3:02 input = document.querySelector('input'). 3:07 Then I'll go ahead and copy this, paste a new one below, 3:15 and change it to const p = document.querySelector. 3:21 Now, since there's more than one paragraph element on the page, 3:26 we'll use the class description to select just the one we want. 3:30 I'll paste another one right below, and this one will say, 3:39 const button = document.querySelector('button');. 3:43 So next, right below, I'll call addEventListener on button to listen for 3:51 when the button is clicked. 3:56 And when the button is clicked, 4:08 we'll use the value of the text input to set the paragraph's textContent property. 4:10 So inside, we'll say p.textContent = input.value. 4:16 And let's also add a colon to the end of the input value by typing plus and 4:23 then a semicolon inside a set of quotes. 4:28 All right, so let's save our file, go over to the browser, and refresh. 4:33 So now let's type something in this field. 4:39 Let's say Blue items. 4:42 And click the button. 4:46 And now we have a list description of blue items. 4:48 And notice that a colon was placed at the end. 4:51 Great. 4:53 So there's one more way of altering content I want to show you, 4:55 called innerHTML. 4:58 So let's hop over to app.js and 5:00 just swap out text content with innerHTML. 5:04 So back in the browser, we see that it functions exactly the same way. 5:14 I'll type blue items, and the paragraph text changes to blue items:. 5:18 However, innerHTML can do more than just handling text. 5:24 As its name suggests, it can also read and alter the elements on a web page. 5:29 You can read and replace everything between an element's opening and 5:34 closing tag. 5:37 So for example, let's select the UL element in the console and 5:39 store it in a variable. 5:44 So we'll say let ul = 5:45 document.querySelector('ul'). 5:50 And now if we call innerHTML on the ul, 5:59 it gives us a string of the HTML code within the ul element. 6:03 Then if we were to set this list to a string of HTML tags and 6:10 text, we would replace the ul's content with that HTML. 6:14 Let's see how that works. 6:18 So back in the console, I'll type ul.innerHTML =, 6:20 then inside the quotes, I'll add opening and closing list item tags. 6:25 Inside the tags, I'll write, red cabbage. 6:33 So now when I hit Enter and check out the page in the browser, we see that there's 6:38 just one list item, because we replaced all the list contents with this new HTML. 6:44 All right, so well done. 6:51 Now that we can alter textual content, 6:52 let's have a look at how to change the attribute of an element. 6:55