innerHTML vs innerText
A quick analysis of their results.
I have worked on a couple of JavaScript Single Page Applications (SPAs). I believe it’s a really fun way to learn frontend development because you get to feel like the master mind behind every single detail. A couple of items that exist is SPAs areinnerHTML and innerText. During my experience in my bootcamp, I just guessed which one to use. Now that I have more time to digest material better, I want to understand the difference between innerHTML and innerText. This blog to clear the basic difference of what the result of both functions are. I plan to create a future example that better represents the best time to use innerHTML and innerText in a SPA. For now, I’ll be sharing how I created my analysis of innerHTML and innerText example step by step. I will be using the Mac terminal, commands, and VS Code. Feel free to follow it yourself or refer to my git repository.
Step 1 — Creating a directory and files
Decide where you want to create a folder for this example, such as your Desktop. Create a folder using mkdir with a folder name of your choice. I used mkdir text_vs_html. Once that is created, go into that directory. For my example that would becd text_vs_html. Next we will make two files to hold HTML and another to hold JavaScript. Do that by typing the command touch index.html then hit enter to create the HTML file. Same is done to create the JavaScript file using touch index.js. If you type the command ls you should now see index.html and index.js within your text_vs_html directory. Now it’s time to open the directory is VS Code. I use the command code . You should see the following image in your VS Code.
Step 2 — Adding code to index.html
Open the index.html file in your editor. VS Code has a great shortcut to help get us started. Type in ! then hit enter. You should get the following.
If you don’t have the shortcut, then you get to practice your typing skills by writing it all out :).
All of the code will be contained in the <body> element. The red, blue, and green box is what needs to be added in theindex.html file.
Notice that the red box contains a paragraph element with an id of “element”. This will be the content that we will be analyzing for the difference between innerText and innerHTML. There is a third option for textContent that I just discovered, so I thought it would be good to add as “bonus” information. The exaggerated spaces are intentional, so put as many as you need for clear visual representation. You’ll see how the spaces are useful when analyzing the result of innerText and innerHTML (and textContent).
The blue box represents buttons that have JavaScript functions attached to them. Each button will console log different information for us to recognize the result of using innerText and innerHTML.
The green box is what is connecting the JavaScript file to our HTML. The JavaScript file is where all of the logic happens to make our buttons work.
You can open your index.html file on your browser. You should get something that looks similar to
There are many ways to open an index.html file. I use an extension for VS Code called Live Server. This is NOT the only option, so find one that you prefer. What I am showing is my preference and only a suggestion.
Once the extension is installed you should see “Go Live” in you status bar that is located at the bottom of the editor. Click “Go Live” and the index.html should open in your browser.
Once your file is open in your browser you should see
The buttons don’t do anything yet since we have not added a JavaScript code to our index.js file. That’s next.
Step 3 — Adding code to index.js
Open the index.js file. We will create the first function for the first button in line 12 of index.html.
I like to make simple functions to make sure I connected the index.js file correctly to the index.html file. I do so by making a basic console log. We will test with the first function called showInnerHTML()that is attached to the first button “InnerHTML”.
Back in your browser, open your bowser console. When the “InnerHTML” button is clicked, it should console log “Show inner html button clicked!” This means that the function and file are properly connected.
Now it’s time to add the JavaScript logic.
Each function is grabbing the paragraph element by its id of “example” by using getElementByID("example") I decided to name the element grabbed exampleElement. So each function is grabbing
<p id="example">This is a paragraph element that has a lot of spaces and contains a <b>bold element</b>.</p>, name the element exampleElement, and console log something different by using exampleElement.innerHTML, exampleElement.innerText, or exampleElement.textContent.
Let’s click each button and look at the results.
The result of clicking the “innerHTML” button is boxed off in red in the browser console. Notice that that every word, space, and HTML tag is logged within the paragraph element.
The result of clicking the “innerText” button shows only the words without the extra spaces within the paragraph element..
The result of clicking the “textContent” button shows the words and extra space within the paragraph element..
Those are the basic difference between innerHTML, innerText, and textContent.
This is useful to know because there are times when you may need only text values or may need the HTML with the text value. My next goal is to learn best practice of when innerHTML, innerText, and textContent are needed.
