Update Existing Page Content
Let's jump right into it. Open up the project in your browser. There's only one HTML file (index.html) so this is what it should look like after you open it:
The index page of the Udacity website loaded in a browser.
💡Project Code 💡
Instructions and a walkthrough of the project were in the previous section. You can clone the project from the GitHub link below. Look back at the previous section to see detailed information about the project and a walkthrough video.
Project repository:https://github.com/udacity/course-JS-and-the-DOM
Write the DOM code necessary to select the_first_element with class:card
SUBMIT : document.querySelector('.card');
Let's store the first.cardelement in a variable for easy access:
const nanodegreeCard = document.querySelector('.card');
Now that we've stored the first card element in thenanodegreeCardvariable, we can usenanodegreeCardto refer to this element instead of having to usedocument.querySelector('.card')to select the element every time we need access to it.
An Element's Inner HTML
Every element inherits properties and methods from the Element Interface (remember this from the previous lesson!). This means that every element has an.innerHTMLproperty. This property, as it's rightly named, represents the markup of the element's content. We can use this property to:
- get an element's (and all of its descendants!) HTML content
- set an element's HTML content
QUESTION 2 OF 4
What is.innerHTML?
a property
a method
an element
an interface
SUBMIT: A (.innerHTML is a property on an element.)
QUESTION 3 OF 4
What does.innerHTMLreturn?
a DOM element
a Node
a string
an array
an object
SUBMIT: C (If you look at this in the console, it looks like a string. Technically, however, what it returns is called a DOMString .)
💡 Innie vs Outie 💡
The
.innerHTMLproperty sets or returns the HTML content_inside_the selected element (i.e. between the tags).There's also the rarely used
.outerHTMLproperty..outerHTMLrepresents the HTML element itself,as well as its children.<h1 id="pick-me">Greetings To <span>All</span>!</h1> const innerResults = document.querySelector('#pick-me').innerHTML; console.log(innerResults); // logs the string: "Greetings To <span>All</span>!" const outerResults = document.querySelector('#pick-me').outerHTML; console.log(outerResults); // logs the string: "<h1 id="pick-me">Greetings To <span>All</span>!</h1>"
An Element's Text Content
So.innerHTMLwill get/set an element's_HTML_content. If we just want the text content, we can use the fantastically named.textContentproperty!
The.textContentproperty will:
- set the text content of an element and all its descendants
- return the text content of an element and all its descendants
Let's check it out!
Check out the.textContent's documentation page on MDN:textContent docs
Setting an element's text content is easy, just set it like you would any other property:
nanodegreeCard.textContent = "I will be the updated text for the nanodegreeCard element!";
QUESTION 4 OF 4
<h1 id="test">Ice Cream Flavors</h1>
Given the HTML above, what will be the.textContentvalue after running this code:
const myElement = document.querySelector('#test');
myElement.textContent = 'The <strong>Greatest</strong> Ice Cream Flavors';
Ice Cream Flavors
The Greatest Ice Cream Flavors
The < strong >Greatest</ strong > Ice Cream Flavors
running this code will cause an error
SUBMIT: C (Passing any text that _looks _like HTML to the .textContent property will still be displayed as text. It will _not _be displayed as HTML when the element is rendered.)
We just saw that passing text that contains HTML characters to.textContentwill not display the content as HTML. Instead, it will still display everything as text - even the HTML characters!
If you'd like to update an element,_including_its HTML, then you need to use the.innerHTMLproperty:
myElement.textContent = 'The <strong>Greatest</strong> Ice Cream Flavors'; // doesn't work as expected
myElement.innerHTML = 'The <strong>Greatest</strong> Ice Cream Flavors'; // works as expected
An Element's Text Content - Version 2!
We can't close this section out without looking at the.innerTextproperty!
Like the.textContentproperty, the.innerTextproperty can be used to get/set an element's text content, but there are some important differences between the two properties.
.textContentsets/gets the text content of an element...pretty clear and simple.
.innerText, on the other hand, is a little tricker. Let's see this in action and then we'll discuss it!
As you saw,.innerTextwill get the visible text of the element(working w/ CSS). This is an important distinction! If CSS is used to hide any text inside that element,.innerText_will not _return that text, while.textContent_will _return it. And it's not just the hiding/showing nature of CSS that.innerTextadheres to,.innerTextwill also honor changes to things like capitalization.
The.textContentproperty has been a standard for quite a long time. Conversely,.innerTextproperty is a relatively new addition to the HTML specification. It has been around for a while but was not fully supported by all browser because it was not a part of the HTML specification.
Between.textContentand.innerText, you probably want to use.textContentsince that will return all of the text no matter what. Rarely will you actually want only the visible text.
Update Existing Content Recap
In this section, we looked at multiple ways to change page content:
.innerHTML.textContent.innerText
We saw that to set HTML content for an element, out of the three properties list above, we can only use.innerHTML. Using.textContentwill erroneously include the HTML characters as plain text inside the element.
We also looked at the difference between.textContentand.innerText..textContentcompletely ignores any CSS styling and returns all of the element's HTML just as it's listed in the HTML. On the other hand, the.innerTextproperty will take CSS styling into consideration and will return the text that is visibly rendered on the page.