How to replace innerHTML of a div using jQuery? Last Updated : 23 Apr, 2019 Summarize Comments Improve Suggest changes Share Like Article Like Report For replacing innerHTML of a div with jquery, html() function is used. Syntax: $(selector).html() Example: html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> changing-innerhtml-using-jquery </title> <link href= "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> <style> body { margin-top: 5%; } div { text-align: center; } </style> <script src= "https://code.jquery.com/jquery-3.4.0.min.js" 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: Comment More infoAdvertise with us Next Article How to iterate through child elements of a div using jQuery ? S shilpiagk Follow Improve Article Tags : Web Technologies JQuery jQuery-Misc Similar Reads How to load external HTML file using jQuery ? In this article, we will learn how to load an external HTML file into a div element. The following jQuery functions are used in the example codes. ready(): The ready event occurs when the DOM (document object model) has been loaded.load(): The load() method loads data from a server and gets the retu 3 min read How to get the outer html of an element using jQuery ? Sometimes, there is a need to get the entire HTML element by its id and not merely its contents, for doing so, we shall use the HTML DOM outerHTML Property to get the outer HTML of HTML element. Syntax: document.getElementById("your-element-id").outerHTML) You can use a variable and initialize it to 2 min read How to iterate through child elements of a div using jQuery ? jQuery Selector can be used to find (select) HTML elements from the DOM. Once an element is selected, the jQuery children() method is called to find all the child elements of the selected element. To loop through the child elements, the jQuery each() method is used as demonstrated in the following e 3 min read How to remove all attributes of an HTML element using jQuery ? In this article, we will see how to remove all attributes of an HTML element using jQuery. To remove all attributes of elements, we use the removeAttributeNode() method and .removeAllAttributes(). Syntax: $.fn.removeAllAttributes = function() { return this.each(function() { $.each(this.attributes, f 1 min read How to replace HTML element in jQuery ? Replacing an HTML element in jQuery involves selecting an existing element on a webpage and replacing it with new content or another element. This process can be easily managed with jQuery methods like .replaceWith() or .html(), enabling dynamic and flexible content updates.Syntax replaceWith( newCo 2 min read How to Replace the Entire HTML Node using JavaScript? To replace an entire HTML node using JavaScript, you can use methods that allow you to remove an existing node and insert a new one in its place. Approach: Using replace() method Take the new document as a form of string(eg.. Str = '< html > < /html > '). Use .replace() method on the HTM 1 min read Like