The jQuery html() method is very useful when it comes to manipulating web pages.
We can use the jQuery html() method to replace the html inside a div.
Let’s say we have the following code and we want to replace the html content inside our div.
We are going to replace the HTML in this div.
If we want to replace the html content of the div and add some bold text to the paragraph, we can do this easily utilizing both the jQuery click() method and jQuery html() method.
Below is the Javascript code which will allow the user to be change the text and html content inside the div.
The final code and output for this example of how to replace the html inside our div using the jQuery html() method and Javascript is below:
We are going to replace the HTML in this div.
We are going to replace the HTML in this div.
Replacing Multiple Elements Inside a Div with jQuery
If you want to replace multiple elements inside a div, we can do that as well with the jQuery html() method.
If you want to change the HTML structure within a div, or add a complex HTML structure to a HTML element, we just need to build a string and then pass it to the jQuery html() method.
Let’s say we have the following code and we want to add multiple paragraphs to a div.
If we want to change the html content of the div and add multiple paragraphs, we can do this easily by building a string with all of the HTML elements we want, and then passing it to the jQuery html() method.
Below is the Javascript code which will allow us to add multiple paragraphs and change the inner html of our div.
The final code and output for this example of how to replace the html of a div and add multiple elements with a click using the jQuery html() method and Javascript is below:
Hopefully this article has been useful for you to understand how to use jQuery to replace the HTML inside a div.
Other Articles You’ll Also Like:
1. Using jQuery to Add Class to HTML Element
2. Using jQuery to Swap an Image on Hover
3. Using jQuery to Set the Width of a Div
4. jQuery parent – Get the Parent Element of a Div
5. How to Set All Checkbox to Checked in jQuery
6. Check if Input is Empty Using jQuery
7. Using jQuery to Wait 1 Second Before Executing Code
8. Using jQuery to Convert a String to Lowercase
9. Using jQuery to Add id to div
10. Using jQuery to Disable a Button
About The Programming Expert
The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.
Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.
At the end of the day, we want to be able to just push a button and let the code do it’s magic.
Description: Replace each element in the set of matched elements with the provided new content and return the set of elements that was removed.
version added: 1.2 .replaceWith( newContent )
version added: 1.4 .replaceWith( function )
The .replaceWith() method removes content from the DOM and inserts new content in its place with a single call. Consider this DOM structure:
divclass="container">
divclass="inner first">Hello div>
divclass="inner second">And div>
divclass="inner third">Goodbye div>
div>
The second inner could be replaced with the specified HTML:
$( "div.second" ).replaceWith( "
New heading
" );
This results in the structure:
divclass="container">
divclass="inner first">Hello div>
h2>New heading h2>
divclass="inner third">Goodbye div>
div>
All inner elements could be targeted at once:
$( "div.inner" ).replaceWith( "
New heading
" );
This causes all of them to be replaced:
divclass="container">
h2>New heading h2>
h2>New heading h2>
h2>New heading h2>
div>
An element could also be selected as the replacement:
$( "div.third" ).replaceWith( $( ".first" ) );
This results in the DOM structure:
divclass="container">
divclass="inner second">And div>
divclass="inner first">Hello div>
div>
This example demonstrates that the selected element replaces the target by being moved from its old location, not by being cloned.
The .replaceWith() method, like most jQuery methods, returns the jQuery object so that other methods can be chained onto it. However, it must be noted that the original jQuery object is returned. This object refers to the element that has been removed from the DOM, not the new element that has replaced it.
Additional Notes:
The .replaceWith() method removes all data and event handlers associated with the removed nodes.
Prior to jQuery 1.9, .replaceWith() would attempt to add or change nodes in the current jQuery set if the first node in the set was not connected to a document, and in those cases return a new jQuery set rather than the original set. The method might or might not have returned a new result depending on the number or connectedness of its arguments! As of jQuery 1.9, .after() , .before() , and .replaceWith() always return the original unmodified set. Attempting to use these methods on a node without a parent has no effect—that is, neither the set nor the nodes it contains are changed.
Examples:
On click, replace the button with a div containing the same word.
The replace() function is a jQuery function that can be used to replace elements that have been declared by the end-user. Each element is a set of matched elements that will be provided with new contents. It returns the set of elements that have not been removed by the end-user as well as only the removed elements.
These replace() methods have a few child methods, such as replaceAll() and replaceWith(). These replacements will be done by integrating target elements with the set of achieved items on the list, which might be a collection of strings.
Only the first instance of the value will be changed if you’re replacing a value rather than a regular expression. Use the global (g) modifier to replace all instances of a given value.
jQuery Replace String, Text, or HTML Element
Using the jQuery replace() function you can replace the specific string from the sentence. So if you want to change or replace the string from the sentence or text then use the replace function.
First, we will target that element where we want to make changes then we run the replace function by passing the targeted element and string. It will only replace the string at the first occurrence from the sentence. It means when you run the replace() function it will search the replaceable text from the sentence and where it is found it will stop.
Note: You need to use the replaceAll() function to replace all the occurrences of a string. We will cover later in the examples below.
Example 1 – jQuery Replace String
Let’s see the example of the jquery replace() function to replace the string.
In the above example, when you click on the Replace button then it will replace the ‘function’ string with ‘method’ in the given paragraph.
Example 2 – jQuery Replace Text
Let’s replace the full text of the element with replace() function. See the example code below.
The above example will replace the whole text with the custom text. See the codepen demo example from the below link.
Example 3 – jQuery Replace Text in Div
See the following example of how to replace text in tag.
Example 4 – jQuery Replace Text in Span
See the following example of how to replace text in tag.
Example 5 – jQuery Replace Text in Textarea
See the following example of how to replace text in tag.
Example 6 – jQuery Replace HTML
See the following example of how to replace HTML.
Example 7 – jQuery Replace Text with replaceAll() function
The replaceAll() function is a child function of replace() function. It will replace all the matched occurrences with custom text.
Syntax
See the following example of how to replace text using the replaceAll() function.
Example 8 – jQuery Replace Text with replaceWith() function
The replaceWith() function is also the child function of replace() function. It will replace selected elements with new custom text.
Syntax
Conclusion
So in this tutorial, you learned the jquery replace() function, how to replace string, text, or HTML elements with a specific string.
You also learned the replaceAll() function to replace all the matched occurrences in the paragraph text. If you have any questions please put in the comment section.
You May Also Like
How to Change Apply Coupon Button Text In WooCommerce?
How to Create a Right-Click Context Menu in React?
How to Create Custom Back Button with React Router?
How to Create a Blog Post Template in WordPress?
How to Remove OBJ Box From Title and URL in WordPress
How to Check If Checkbox is Checked or Not in jQuery?
About the Author: Aman Mehra
Hey! I’m Aman Mehra and I’m a full-stack developer and have 5+ years of experience. I love coding and help to people with this blog.
