If we recall, JavaScript converts ALL HTML elements into objects, so it can then manipulate these objects in some way. From the console, we can call
- console.dir(document.queryselector(HTML Element))
to see a list of all of the properties for a specific object (HTML Element). So innerText, innerHTML, and textContent are all properties of a JavaScript Object, which represents an HTML Element.
In the following discussions we'll be using this paragraph ([p] tag) for explanation purposes
< p> The Silkie (sometimes spelled Silky) is a breed of chicken named for its atypically fluffy plumage, which is said to feel like silk and satin. The breed has several other unusual qualities, such as
black skin and bones, blue earlobes, and five toes on each foot, whereas most chickens only have four. < /p>
Nested inside this [p] tag we have some [b], [i], and [a] tags. Note that the [a] tags are "broken links" and are for demonstration purposes only.
innerText
The innerText property sets or returns just the text content of the element AND ALL of its children, without any CSS hidden text spacing and tags, EXCEPT script and style elements. This means that it returns ALL of the text of an element, EXCEPT for hidden elements.
So if we apply innerText to the above paragraph, the call would be:
- document.querySelector('p').innerText;
we are using querySelect() as opposed to querySelectAll() to return data from the first [p] tag only,
and we would get:
The Silkie (sometimes spelled Silky) is a breed of chicken named for its atypically fluffy plumage, which is said to feel like silk and satin. The breed has several other unusual qualities, such as black skin and bones, blue earlobes, and five toes on each foot, whereas most chickens only have four.
Notice that it returned just the text content of the element AND ALL its children, without any CSS hidden text spacing and tags
Also notice that you can set OR return the data which means returning the data for use in the programming somewhere, OR setting the data, which creates a means by which we can change the data.
for example:
- document.querySelector('p').innerText; // returns the data
- document.querySelector('p').innerText = 'My new paragraph.'; // changes the data
textContent
The textContent property returns the text content of the element and all descendants, with spacing and CSS hidden text, but without tags. textContent works similarly to innerText but it returns hidden elements.
So in our paragraph above, if he first bolded word Silkie was hidden, say through a style tag such as display: none,
innerText would return:
The (sometimes spelled Silky) is a ...
but innerContent would return:
The Silkie (sometimes spelled Silky) is a ...
innerHTML
The innerHTML property returns the text content of the element, including all spacing and inner HTML tags. What this does is allows us to change the HTML markup.
So in out paragraph example above, the first "Silkie" is bold. But what if we wanted to change this to italic instead of bold? We use innerHTML for this.
The original markup is:
The < b>Silkie< /b> (sometimes spelled Silky) is a ...
and by using innerHTML, we change the [b] tag to an [i] tag:
- document.querySelector('p').innerHTML = "The < i>Silkie< /i> (sometimes spelled Silky) is a ...";
and now we get:
The < i>Silkie< /i> (sometimes spelled Silky) is a ...
So innerHTML returns the text AND the original HTML Markup, but it also allows us to CHANGE that markup. Not only does it allow us to change the markup, it also allows us to ADD or DELETE markup.
You can use += (plus equals) to add new markup to existing markup.
for example, if we if we have a heading tag [h5] and we want to add a subscript to the end, we would use the +=.
Heading
so, an [h5] tag, we modify it like so:
- document.querySelector('h5').innerHTML += '< sub>subscript< /sub>';
and we would get
Headingsubscript
Ideas - -