Chapter 6 - Purpose Of Textcontent & Innertext Properties?

[FrontEndDev]

Hi all,

 

I have recently purchase Larry Ullman's book, Modern Javascript, and working my way through each of the chapters.

 

I have reached Chapter 6 - Complex Variable Types and have got stuck on page 179.

 

As I work my way through the book I have been making lots of comments in my Javascript files to ensure that I fully understand the purpose of each line of code. However, when it has come to the code with textContent and innerText I have got stuck.

 

For the example which displays today's date and time (page 178) I do not know why the textContent and innerText properties are used. From what I have gathered, textContent works in Firefox, while innerText works in Internet Explorer. What is the purpose of using them? Are they both used to ensure the date and time are displayed in both Firefox and IE?

 

The code I am querying is:

 

if (output.textContent !== undefined) {

    output.textContent = message;

} else {

  output.innerText = message;

}

 

 

From what I have read the code will display the following message if the output ID in the HTML document is undefined, "Right now it is January 19, 2014 at 19:42". Would the document.write method work as well or is not appropriate for the task?

 

Sorry if this is a really stupid question. I have tried searching for an answer on Google but am overwhelmed by the number of websites which only confused me further or use terminology I do not understand. I moved on to the section on arrays but it is used there as well so thought it would be a good idea to fully understand the purpose of the properties before moving on.

[HartleySan]

Hello, and welcome to the forums.

I'm not sure if you've already read this link, but the following link may answer your question:

http://www.kellegous.com/j/2013/02/27/innertext-vs-textcontent/

 

If you're still confused, please let us know.

Thanks.

[FrontEndDev]

Thank you for taking the time to reply and post the link to the website. I am afraid it has not really improved my understanding of the properties.

 

I have read part of Chapter 9 which mentions that document.write is undesirable. I presume that innerText and textContent are therefore preferable? I have also stumbled across innerHTML as well which has only confused me further.

 

Am I correct in saying that innerHTML can be used to display text in HTML format which means that it can be modified to be for example, bold, italic, red, etc? Whereas innerText would display the text in Plan Text which has no formatting whatsoever?

 

I would like to understand this as I am sure it will come in useful in the future and would be good to know when to use it.

[HartleySan]

The distinction between innerHTML, innerText and textContent are probably best explained with an example.

Let's say we have the following markup:

 

<div id="profile"><p>Name: Smith,
Bill</p><p style="visibility: hidden;">Age: 36</p></div>

 

And then let's say we assign the div above to a JS variable as follows:

 

var profileDiv = document.getElementById('profile');

 

At this point, profileDiv.innerHTML is equal to the following:

 

<p>Name: Smith,
Bill</p><p style="visibility: hidden;">Age: 36</p>

 

While profileDiv.innerText is equal to the following:

 

Name: Smith, Bill

 

While profileDiv.textContent is equal to the following (where \n is the newline character):

 

Name: Smith,\nBillAge: 36

 

As we can see, only the innerHTML property returns the markup within the profile div along with the text within the profile div.

Also, innerText only returns text that would actually be visible on the screen (note that style="visibility: hidden;" hides the second p tag within the div, thus making "Age: 36" not be displayed on the screen).

Lastly, textContent displays all text within the profile div, regardless of whether or not it's actually displayed on the screen. Also, the newline character is preserved for textContent, but innerText turns the newline character into a regular space.

 

Does that help?