Jump to content
Larry Ullman's Book Forums
Sign in to follow this  
FrontEndDev

Chapter 6 - Purpose Of Textcontent & Innertext Properties?

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...