Updated April 20, 2023
Introduction to jQuery innerHTML
The jQuery UI innerHTML property is used to sets or get the HTML content or inner HTML of an element. The jQuery UI innerHTML is a built in property or attribute in the jQuery UI library. The jQuery UI innerHTML property allows to writes a dynamic html on the html document. Mostly it is used to create the links, comment form, registration form etc. All HTML elements have an innerHTML property. The jQuery .html() method can be used to retrieve the HTML content of the first element of the set of matched elements. Note that jQuery innerHTML does not exits as a method, we use the, html() method to set or get the HTML content.
Syntax of the jQuery UI innerHTML property:
There are two syntax of jQuery UI innerHTML property based on the purpose of the usage:
HTMLelementObj.innerHTMLIt is used to return the innerHTML property. The return value of this property is String, which represents the HTML content of an element.
HTMLelementObj.innerHTML = textIt is used to set the innerHTML property. The text represents the HTML content of an element.
Examples of jQuery innerHTML
Given below are the examples mentioned :
Example #1
The innerHTML property used to set the contents of the html elements.
Code:
<!doctype html>
<html lang ="en">
<head>
<meta charset="utf-8">
<title>This is an example for jQuery UI innerHTML property </title>
</head>
<body>
<p id = "p">This is the old content for an element of id p.</p>
<p id = "p">This is the old content for an element of id p.</p>
<div id = "div">This is the old content for an element of id div.</div>
<script>
document.getElementById("p").innerHTML = "This is the new content for an element of id p.";
document.getElementById("div").innerHTML = "This is the new content for an element of id div.";
</script>
</body>
</html>Output:
As in the above program the p and div html elements are defined with some content and later those contents are set or replace by some other content through the innerHTML property by using the id of the html elements. If we see in the above output only the first p element is set by the new content where as the second p element content is still same not changed. So the innerHTML set the content of the first element of the set of matched elements.
Example #2
The innerHTML property used to get the content of the html elements.
Code:
<!doctype html>
<html lang ="en">
<head>
<meta charset="utf-8">
<title>This is an example for jQuery UI innerHTML property </title>
</head>
<body>
<p id = "p">This is the first content for p element. </p>
<p id = "p">This is the second content for p element. </p>
<div id = "div">This is the content for div element. </div>
<button onclick = "getpcontent()"> get p element content </button>
<button onclick = "getdivcontent()"> get div element content </button>
<p id = "d1"></p>
<script>
function getpcontent() {
var d = document.getElementById("p").innerHTML;
document.getElementById("d1").innerHTML = d;
}
function getdivcontent() {
var d = document.getElementById("div").innerHTML;
document.getElementById("d1").innerHTML = d;
}
</script>
</body>
</html>Output:
Once we click on the button “get p element content”, the output:
And when we click on the button “get div element content”, the output:
As in the above program the p and div html elements are defined with some content and those contents we get through the innerHTML property by using the id of the html elements. If we see in the above output only the first p element content is displayed. So the innerHTML property gets the content of the first element of the set of matched elements.
Example #3
The innerHTML property used to create the html form by click on the button in the web page.
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>This is an example for jQuery UI innerHTML property </title>
</head>
<body>
<p> Click below to give any complaints. </p>
<form name = "form">
<input type = "button" value = "Get form for complaint" onclick = "showform()" >
<p id = "d1"></p>
</form>
<script>
function showform() {
var d = "Name : <input type = 'text' name = 'name'> <br> Complaint : <br> <textarea rows = '5' cols = '80'> </textarea> <br> <input type = 'submit' value = 'Post Complaint' >";
document.getElementById('d1').innerHTML = d;
}
</script>
</body>
</html>Output:
Once we click on the button “Get form for complaint”, dynamically the form gets create as in the below output:
As in the above program the form is creating dynamically inside the p element having id d1 by by clicking the button “Get form for complaint” which call the function showform(), where inside this function the form is creating and then set this form as the content of the p element through the innerHTML property by using the id of the p html element.
Conclusion
The jQuery UI innerHTML property is a built in property in the jQuery UI library, which is used to set or get the HTML content or (inner HTML) of an element. It allows to write a dynamic html on the html document like dynamic links, dynamic comments, dynamic form etc. The jQuery UI innerHTML property used with the document.getElementById() method.
Recommended Articles
This is a guide to jQuery innerHTML. Here we discuss the introduction to jQuery innerHTML along with programming examples. You may also have a look at the following articles to learn more –
