How to replace innerHTML of a div using jQuery?
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: