Skip to main content
X

Explore your training options in 10 minutes

How to Use the jQuery html() Method

Ryan Manchester - January 12, 2021


jQuery has many methods available to help developers efficiently create a dynamic web experience. The jQuery html() method replaces all HTML inside of the selected element. This is useful if you want to dynamically change what the user is seeing after interacting with the page.

In this guide we will learn about how to use html() and its syntax. We will also take a look at a step-by-step approach to use html() . jQuery html() is a fundamental method in the jQuery library and is often used. After learning the basics, you will be ready to start practicing using html() .

What is jQuery html()?

jQuery html() sets the HTML contents of each element in a set of matched elements. Caution should be taken to provide a specific enough query to replace only the HTML desired.

Get offers and scholarships from top coding schools illustration

Find Your Bootcamp Match

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










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.

Only the content is changed with html() . If there is a stylesheet, the new content will be styled the same as the previous content. It is also worth mentioning that html() only works on an HTML document — it does not work with XML.

html() jQuery Syntax

Recall that jQuery methods are called on a selector first. The selector may be as broad as a <p> tag or as specific as a <div> with an id (<div id=‘main-app’></div>). Once the desired element is selected, we can call html() and pass in an HTML string as a parameter to html() . For a thorough explanation of CSS selectors, refer to our guide .

html() accepts either a string literal as a parameter or a variable containing the string. Passing a string literal of “New Content” will render the same as passing a variable referencing “New Content.”

Say we have this simple <div>:

<div class='main-content>
  <p class='paragraphOne'> Hello World </p>
</div>

We can replace the entire <p> tag:

$('div.main-content').html('<p>New Content</p>')

The above code renders the new HTML as:

<div class='main-content>
  <p>New Content </p>
</div>

Had there been styling associated with the original <p> tag, it would no longer be active with the new content. It is possible to pass a simple string as well:

$('div.main-content').html('New Content')

Our HTML is now as follows:

<div class='main-content>
  New Content 
</div>

We can see that there are some differences in the new content. Passing a string literal is a great way to maintain the styling of previous content. Remember, a string literal is simply a string with containing characters. If the new content needs to be a child element, using an HTML string accomplishes this.

Now that the basic syntax has been covered, let’s take a look at an example.

html() jQuery Example

We saw how html() replaces the content inside the selected element in our above “New Content” example. This can be accomplished by passing a string literal or an HTML string as a parameter. Let’s look at an example where we maintain the original styling.

Venus, a software engineer at Rockbot

"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

<head>
<style>
.blue {
 color: blue;
}

</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<h2>
html() Demo:
</h2>
<div class='main'>
 <p class='blue'>
 Hello
 </p>
 <p>
 World
 </p>
 <p>
 Goodbye
 </p>
 </div>
 <script>
 
 </script>
</body>

Looking at our beginning HTML page, we will see only the word “Hello” is styled with the color blue.

In this example, we want to replace the word “Hello” with new content, but retain the original styling. To accomplish this, we select the paragraph with the class name blue.

 $('p.blue').html("Hello AGAIN")

We have selected the paragraph belonging to the class blue and replaced “Hello” with “Hello AGAIN.” Since html() replaces the content wrapped in the element names, the blue color will remain.

What if we wanted to replace all of the paragraph text? If we select the <p> element, it will replace the above text with three instances of “Hello AGAIN.”

 $('p').html("Hello AGAIN")

Here we are selecting all paragraph tags in the HTML file and replacing the content of each one with “Hello AGAIN”. Like our first example, the original styling will render because we are replacing content wrapped in those tags.

Just as we expected. Let’s go up one level in our selector to our <div> belonging to the ‘main’ class. This is where passing HTML strings as parameters comes in handy.

 $('div.main').html('<p class=blue>Main Div Content</p>')

Inside our main div, we have three paragraph elements. Knowing how html() works, we can deduce the above code will replace the three <p> tags with the one passed as a parameter. Read our guide on learning HTML to go deeper with the above concept

In one line of code, we replaced three different paragraph elements and used our original class styling.

Conclusion

jQuery html() is a commonly used method for replacing content on HTML pages to create a dynamic experience. Because html() replaces the content that is wrapped inside HTML elements, it is important to pay attention to the jQuery selectors and any style classes. This will prevent any unwanted style changes.

We have learned what jQuery is, its syntax, and an example of how it can be used. Spend some time practicing and getting to now this widely used method.

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?

Ryan Manchester

About the author: Ryan is a technical writer at Career Karma, where he covers programming languages, technology, and web development. The Texas native earned his Bachelor's of Music Composition from the University of North Texas. Ryan is currently pursuing further education in web development, aiming to graduate from Flatiron School with a certification in full stack web development. Since joining the Career Karma team in November 2020, Ryan has used his expertise to cover topics like React and Ruby on Rails.

Skip to main content