Can we use innerhtml in span?

If you're seeing this message, it means we're having trouble loading external resources on our website.

Table of Contents Show

What is JavaScript innerHTML?
Find Your Bootcamp Match
What is JavaScript innerText?
Using innerHTML and innerText in JavaScript
Create a Web Page
Change Text Using JavaScript innerHTML and innerText
JavaScript innerText vs. innerHTML
Conclusion
What's Next?
James Gallagher
Does innerHTML work with SPAN?
Where can I use innerHTML?
Why you shouldn't use innerHTML?
Can we use span inside paragraph?

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

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 element.

Find Your Bootcamp Match

Career Karma matches you with top tech bootcamps
Access exclusive scholarships and prep courses

Select your interest
First name

Last name

Email

Phone number

By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.

You can use innerHTML like so:

document.getElementById(“paragraph”).innerHTML = “Career Karma!”;

This line of code sets the contents of the “paragraph” 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 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 HTML tag on a web page. If you want to replace text, you can use the innerText attribute:

"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

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:

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 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.

What's Next?

Want to take action?
Get matched with top bootcamps

James Gallagher

About the author: James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.

Does innerHTML work with SPAN?

The innerHTML property returns: This element has extra spacing and contains a span element. The textContent property returns: This element has extra spacing and contains a span element.

Where can I use innerHTML?

Use innerHTML when you're setting text inside of an HTML tag like an anchor tag, paragraph tag, span, div, or textarea.

Why you shouldn't use innerHTML?

The use of innerHTML creates a potential security risk for your website. Malicious users can use cross-site scripting (XSS) to add malicious client-side scripts that steal private user information stored in session cookies.

Can we use span inside paragraph?

It is often used inside a element to apply styles to a specific part of a paragraph. For instance, you could use to change the color of a word in a paragraph.