{"id":18710,"date":"2020-10-26T13:20:45","date_gmt":"2020-10-26T20:20:45","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=18710"},"modified":"2023-12-01T04:03:25","modified_gmt":"2023-12-01T12:03:25","slug":"javascript-innertext-innerhtml","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/javascript-innertext-innerhtml\/","title":{"rendered":"JavaScript innerHTML and innerText: A Guide"},"content":{"rendered":"\n

You\u2019ll need to know how to change the text or the HTML that appears on the page to make your sites more interactive. That\u2019s where the innerText<\/em> and innerHTML<\/em> HTML attributes come in.<\/p>\n\n\n\n

These attributes make it easy to change a DOM element\u2019s text and its HTML code. In this guide, you\u2019ll learn how to use the JavaScript innerText<\/em> and innerHTML<\/em> attributes.<\/p>\n\n\n\n

What is JavaScript innerHTML?<\/h2>\n\n\n\n

The JavaScript innerHTML property sets the HTML contents of an element on a web page. InnerHTML is a property of the HTML DOM. innerHTML is often used to set and modify the contents of a <p> element.<\/p>\n\n\n\n

You can use innerHTML like so:<\/p>\n\n\n\n

document.getElementById(“paragraph”).innerHTML = “Career Karma!”;<\/p>\n\n\n\n

This line of code sets the contents of the “paragraph” <p> element to “Career Karma!” The getElementById() method<\/a> retrieves an element by its ID.<\/p>\n\n\n\n

The browser defines a <\/a>Document Object Model (DOM)<\/a> when a page loads. This DOM is a series of objects displayed on the page.<\/p>\n\n\n\n

The DOM means you don\u2019t have to change the HTML code every time you want to change a web element. You can use the DOM and JavaScript to change how the page appears in a particular session.<\/p>\n\n\n\n

What is JavaScript innerText?<\/h2>\n\n\n\n

The JavaScript innerText property sets the text content of an element. It also sets the contents of its descendants. Descendants may include <span> tags inside a paragraph.<\/p>\n\n\n\n

The syntax of innerText is similar to that of innerHTML:<\/p>\n\n\n\n

document.getElementById(“element”).innerText = “This is a test.”;<\/p>\n\n\n\n

This sets the text value of the element with the id “element” to “This is a test.”<\/p>\n\n\n\n

You can test these methods by going into your JavaScript console and selecting an element to change:<\/p>\n\n\n\n

This changes the contents of the first <p> HTML tag on a web page. If you want to replace text, you can use the innerText<\/em> attribute:<\/p>\n\n\n\n

This changes the contents of the second paragraph (denoted by the number 1) on the page to \u201cThis is a test\u201d.<\/p>\n\n\n\n

Using innerHTML and innerText in JavaScript<\/h2>\n\n\n\n

Let\u2019s get started by changing text on a web page. We\u2019re going to create a simple flashcard web page. This web page will display a question about HTML. It will have a button which, when clicked, will reveal the answer to a question about HTML.<\/p>\n\n\n\n

Create a Web Page<\/h3>\n\n\n\n

Our first step is to create an index.html file for our front-end:<\/p>\n\n\n\n

<!DOCTYPE html>\n<html>\n    <head>\n   \t <title>HTML Flashcard App<\/title>\n\t<link rel="stylesheet" href=".\/styles.css" \/>\n    <\/head>\n    <body>\n   \t <div class="flashcard">\n   \t\t <h2>Does a hyperlink only apply to text?<\/h2>\n   \t\t <p>The answer will be revealed when you press "Show answer"<\/p>\n   \t\t <button id="showAnswer">Show answer<\/button>\n\t\t <br \/> <br \/>\n\t\t <div id="showMessage"><\/div>\n   \t <\/div>\n\t<script src=".\/scripts.js"><\/script>\n    <\/body>\n<\/html><\/pre><\/div>\n\n\n\n
This page creates a container with three components. First, we have the question we are asking the user. We have the message about how to reveal the answer. Our page finishes with a button to reveal the answer.<\/p>\n\n\n\n
Our code returns the text content of our elements:<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
We are going to apply some CSS styles in a styles.css file to make our page prettier:<\/p>\n\n\n\n
<style>\n.flashcard {\n    margin: auto;\n    width: 50%;\n    padding: 50px;\n    margin-top: 10%;\n    background-color: lightgreen;\n    text-align: center;\n}\n\nbutton {\n    border: none;\n    background-color: hotpink;\n    padding: 10px;\n    border-radius: 10px;\n}\n<\/style><\/pre><\/div>\n\n\n\n
Now let’s take a look at our web page:
<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
Our site shows something that looks more like a flash card. We\u2019ve styled our button.<\/p>\n\n\n\n
Change Text Using JavaScript innerHTML and innerText<\/h3>\n\n\n\n
We want the answer to the question to be revealed when the button is clicked. First, we\u2019re going to select the text and button elements which we are going to use in our JavaScript code. We\u2019ll be writing all this code in our scripts.js file:<\/p>\n\n\n\n
var answerText = document.querySelector('p');\nvar button = document.querySelector('button');<\/pre><\/div>\n\n\n\n
Next, we\u2019re going to create a JavaScript function<\/a>. This function reveals the answer to our question when the button is clicked:<\/p>\n\n\n\n
function showAnswer() {\n\tanswerText.innerText = "No. Hyperlinks can be used on both text and images.";\n}<\/pre><\/div>\n\n\n\n
To activate our function on a button press, we are going to create a simple event listener. This listener listens for a click on our button:<\/p>\n\n\n\n
button.addEventListener('click', showAnswer);<\/pre><\/div>\n\n\n\n
We\u2019ve finished setting up our flash card app. If we view our web page and click on the \u201cShow answer\u201d button, the text in our paragraph is changed to reveal the answer:\n<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
We could add more functionality to this app using JavaScript innerHTML<\/em>. Suppose we want a message to be displayed at the bottom of the flash card once the button is clicked. This message should appear in red. We could create this message using the following code:<\/p>\n\n\n\n
var message = document.querySelector('#showMessage');\n\nfunction showAnswer() {\n\tanswerText.innerText = "No. Hyperlinks can be used on both text and images.";\n\tmessage.innerHTML = "<span style='color:red;'>You have revealed the answer.<\/span>";\n}<\/pre><\/div>\n\n\n\n
Let\u2019s try to run our code with the revised showAnswer()<\/em> function and the new query selector we wrote:<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
We\u2019ve used the innerHTML<\/em> method to add a HTML <span><\/a> tag to our site. This tag displays a message that appears in red when a user presses the show answer button.<\/p>\n\n\n\n
JavaScript innerText vs. innerHTML<\/h2>\n\n\n\n
Both the innerText and innerHTML properties let you access and change the contents of a tag. innerText returns  the text without any descendants or spacing. innerHTML returns the text including any descendants and spacing.<\/p>\n\n\n\n
You would use innerText if you want to see the contents of an element in plain text. Using innerHTML is more appropriate if you want to see all the HTML tags that appear in a string.<\/p>\n\n\n\n
In sum, innerText lets you work with plain text whereas innerHTML lets you work with the HTML in a string.<\/p>\n\n\n\n
Both innerText and innerHTML have wide support in modern browsers.<\/p>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
The innerText<\/em> and innerHTML<\/em> properties manipulate the HTML DOM. innerText retuns the text content of an element without spacing or descendants. innerHTML returns the content of an element and any spacing and descendants.<\/p>\n\n\n\n
As a bonus challenge, see whether you can make our code above hide an answer when the button is clicked a second time. Your code should:<\/p>\n\n\n\n