How to replace innerHTML of a div using jQuery?
Last Updated :
23 Apr, 2019
For replacing innerHTML of a div with jquery, html() function is used.
Syntax:
$(selector).html()
Example:
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< title >
changing-innerhtml-using-jquery
</ title >
< link href =
rel = "stylesheet" >
< style >
body {
margin-top: 5%;
}
div {
text-align: center;
}
</ style >
< script src =
type = "text/javascript" >
</ script >
</ head >
< body >
< div class = "div_1" >
< h1 >Geeksforgeeks</ h1 >
< h1 style = "color: green" >
This is the content inside the div before changing
</ h1 >
</ div >
< div class = "div_2" >
< button class = "btn btn-primary"
type = "submit" >
Click here for changing innerHTML
</ button >
</ div >
</ body >
< script >
$(document).ready(function() {
$('.btn').click(function() {
$("div.div_1").html(
"< h1 >< span style = 'color: green;' >GeeksforGeeks"+
"</ span >< br >This is the content inside the div"+
" after changing innerHTML</ h1 >");
})
})
</ script >
</ html >
|
After loading the web page, on clicking the button content inside the div will be replaced by the content given inside the html() function.
Output:
Before clicking button:
After clicking button:
Share your thoughts in the comments
Please Login to comment...