You’ll need to know how to change the text or the HTML that appears on the page to make your sites more interactive. That’s where the innerText and innerHTML HTML attributes come in.
These attributes make it easy to change a DOM element’s text and its HTML code. In this guide, you’ll learn how to use the JavaScript innerText and innerHTML attributes.
What is JavaScript innerHTML?
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.
You can use innerHTML like so:
document.getElementById(“paragraph”).innerHTML = “Career Karma!”;
This line of code sets the contents of the “paragraph” <p> element to “Career Karma!” The getElementById() method retrieves an element by its ID.
The browser defines a Document Object Model (DOM) when a page loads. This DOM is a series of objects displayed on the page.
The DOM means you don’t 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.
What is JavaScript innerText?
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.
The syntax of innerText is similar to that of innerHTML:
document.getElementById(“element”).innerText = “This is a test.”;
This sets the text value of the element with the id “element” to “This is a test.”
You can test these methods by going into your JavaScript console and selecting an element to change:
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 attribute:
This changes the contents of the second paragraph (denoted by the number 1) on the page to “This is a test”.
Using innerHTML and innerText in JavaScript
Let’s get started by changing text on a web page. We’re 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.
Create a Web Page
Our first step is to create an index.html file for our front-end:
<!DOCTYPE html>
<html>
<head>
<title>HTML Flashcard App</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<div class="flashcard">
<h2>Does a hyperlink only apply to text?</h2>
<p>The answer will be revealed when you press "Show answer"</p>
<button id="showAnswer">Show answer</button>
<br /> <br />
<div id="showMessage"></div>
</div>
<script src="./scripts.js"></script>
</body>
</html>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.
Our code returns the text content of our elements:
We are going to apply some CSS styles in a styles.css file to make our page prettier:
<style>
.flashcard {
margin: auto;
width: 50%;
padding: 50px;
margin-top: 10%;
background-color: lightgreen;
text-align: center;
}
button {
border: none;
background-color: hotpink;
padding: 10px;
border-radius: 10px;
}
</style>Now let’s take a look at our web page:
Our site shows something that looks more like a flash card. We’ve styled our button.
Change Text Using JavaScript innerHTML and innerText
We want the answer to the question to be revealed when the button is clicked. First, we’re going to select the text and button elements which we are going to use in our JavaScript code. We’ll be writing all this code in our scripts.js file:
var answerText = document.querySelector('p');
var button = document.querySelector('button');Next, we’re going to create a JavaScript function. This function reveals the answer to our question when the button is clicked:
function showAnswer() {
answerText.innerText = "No. Hyperlinks can be used on both text and images.";
}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:
button.addEventListener('click', showAnswer);We’ve finished setting up our flash card app. If we view our web page and click on the “Show answer” button, the text in our paragraph is changed to reveal the answer:
We could add more functionality to this app using JavaScript innerHTML. 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:
"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"
Venus, Software Engineer at Rockbot
var message = document.querySelector('#showMessage');
function showAnswer() {
answerText.innerText = "No. Hyperlinks can be used on both text and images.";
message.innerHTML = "<span style='color:red;'>You have revealed the answer.</span>";
}Let’s try to run our code with the revised showAnswer() function and the new query selector we wrote:
We’ve used the innerHTML method to add a HTML <span> tag to our site. This tag displays a message that appears in red when a user presses the show answer button.
JavaScript innerText vs. innerHTML
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.
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.
In sum, innerText lets you work with plain text whereas innerHTML lets you work with the HTML in a string.
Both innerText and innerHTML have wide support in modern browsers.
Conclusion
The innerText and innerHTML 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.
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:
- Hide the answer when a user clicks the button
- Change the text of the button from “Show answer” to “Hide answer” when the answer is showing.
- Keep the “You have revealed the answer” message after a user has pressed “Hide answer”.
If you’re looking for more tutorials that will help you learn JavaScript, check out our best tutorials for JavaScript beginners guide.
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
