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 > |
chevron_right
filter_none
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:
Recommended Posts:
- How to add innerHTML to print page?
- Difference between innerText and innerHTML
- HTML | DOM innerHTML Property
- jQuery | jQuery.fx.interval Property with example
- jQuery | jQuery.support Property
- jQuery | jQuery.fx.off Property
- jQuery | jquery Property
- How to replace text with CSS?
- JavaScript | Replace() Method
- How to replace plain URL with link using JavaScript ?
- How to replace an item from an array in JavaScript?
- HTML | DOM Location replace() Method
- How to replace a character at a particular index in JavaScript ?
- How to replace all dots in a string using JavaScript?
- How to replace lowercase letters with an other character in JavaScript ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.