Updated April 7, 2023
Introduction to jQuery replace innerhtml
The jQuery replace innerHTML is performed to replace innerHTML of the selected element. The innerHTML property is used to write the dynamic HTML content on an HTML document like comment form, registration form, link, and all. When we need to replace the innerHTML dynamic content we can use the innerHTML property or the html() function and provide the new content.
The syntax of the jQuery to replace innerHTML –
document.getElementById( "id" ).innerHTML= content;The syntax of the jQuery html() function to set the content –
$( "selector" ).html( content );The syntax of the jQuery html() function to set the content by calling function –
$( "selector" ).html( function( index, currcontent ) );Parameters –
content – This is not an optional parameter. It specifies the new content to replace the old content of the innerHTML. The content cam also has HTML tags.
function( index, currcontent ) – This is an optional parameter that specifies the function which returns the new content to replace the old content of the innerHTML. The index parameter represents the index position of an element in the matched set of elements and the currcontent parameter represents the current HTML content of the selected element.
The working of the jQuery html() function to replace innerHTML –
The jQuery html() function used to replace the innerHTML, the function accept the new content to replace. Suppose we have a div element in the HTML page that contains some text content, now we need to replace it with some other content. So we can use the innerHTML property as “$( “#divid” ).html( “New content” );”. So it replaces the div old content with the new content, we can see in the below examples.
Examples for the jQuery html() function to replace innerHTML
Here are the following examples mention below
Example #1
Example of jQuery replace innerHTML to add the comment box –
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset = "utf-8">
<script src = "https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery html() function to replace innerHTML </title>
<script>
function disp()
{
var data="Additional details : <br><textarea rows = '4' cols = '40'> </textarea><br>";
document.getElementById( "additional" ).innerHTML=data;
}
</script>
</head>
<body>
<h3> This an example of jQuery html() function to replace innerHTML : </h3>
<form action = "#myform">
<div>
Name : <input type = "text"> <br/>
Password : <input type = "text"> <br/>
Select Department : <select>
<option> Production </option>
<option> Marketing </option>
<option> Research and Development </option >
<option> Human Resource Management </option>
</select>
<div id = "additional"> </div>
<input type = "submit" id = "sub">
</div>
<button onclick = "disp()"> Click to get the additional details box in the form. </button>
</body>
</html>An output of the above code is –
Once we click on the p text content, the output is –
In the above code, the form element contents are Name, password, department, and submit. Next on click of the last button it displays or add the additional details box by replacing the div content as “document.getElementById( “additional” ).innerHTML=data;”, where data is the area box for the additional details box. So it displays the new content, as we can see in the above output.
Example #2
Example to replace the div by the suggestion box –
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset = "utf-8">
<script src = "https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery html() function to replace innerHTML </title>
<script>
var flag=true;
function disp()
{
var Sugg = "<form action = 'suggestion'> Enter Your Name : <br><input type = 'text' name = 'name'/><br/> Customer ID : <br><input type = 'cid' name = 'cid'/><br> Enter Suggestion : <br/> <textarea rows = '4' cols = '40'></textarea><br><input type = 'submit' value = 'Post Suggestion'/> </form>";
if(flag){
document.getElementById( "Suggestion" ).innerHTML = Sugg;
flag = false;
}
else
{
document.getElementById( "Suggestion" ).innerHTML = "";
flag = true;
}
}
</script>
</head>
<body>
<h3> This an example of jQuery html() function to replace innerHTML : </h3>
<div id = "Suggestion"> Here will add the Suggestion box. </div>
<button onclick = "disp()"> Click to replace the above content and add the Suggestion box. </button>
</body>
</html>An output of the above code is –
Once we click on the button, the output is –
In the above code, the dive element has content. Next on click of the last button it displays the suggestion form by replacing the div content as “document.getElementById(“Suggestion”).innerHTML = Sugg;”, where Sugg is the form with contains the group of elements for the suggestion form. So it displays the new content, as we can see in the above output.
Example #3
Example of jQuery replace innerHTML to replace the button content –
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset = "utf-8">
<script src = "https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery html() function to replace innerHTML </title>
<script>
var flag = true;
function disp()
{
if(flag){
$( "#btn" ).html( "OFF" );
flag = false;
}
else
{
$( "#btn" ).html( "ON" );
flag = true;
}
}
</script>
</head>
<body>
<h3> This an example of jQuery html() function to replace innerHTML : </h3>
<div > Click below button to replace the button ON to OFF and vice versa.</div>
<button onclick = "disp()" id = "btn"> ON </button>
</body>
</html>An output of the above code is –
Once we click on the button, the output is –
when we click again the button, the output is –
In the above code, the button element has “ON” content. Next on click of the button it displays the “OFF” by replacing the “ON” content and vice versa as “$( “#btn” ).html( “OFF” );”, by using the html() function. So it displays the “ON” and “OFF” content, as we can see in the above output.
Conclusion
The jQuery innerHTML property and html() function are built-in, which can be used to replace the innerHTML content.
Recommended Articles
This is a guide to jQuery replace innerhtml. Here we discuss the Examples for the jQuery html() function to replace innerHTML along with the outputs. You may also have a look at the following articles to learn more –
