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.
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:
81% of participants stated they felt more confident about their tech job prospects after attending a bootcamp. Get matched to a bootcamp today.
The average bootcamp grad spent less than six months in career transition, from starting a bootcamp to finding their first job.
$('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.
<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.