How to load external HTML file using jQuery ?

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= 
"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:

How to load external HTML file using jQuery ?

S

shilpiagk

Improve

Article Tags :

Similar Reads

How to add table row in a table using jQuery?

In jQuery, adding a row to a table refers to dynamically inserting a new table row (<tr>) into an existing HTML table. This functionality allows developers to update and manage table content in real-time, enhancing interactivity and user experience without reloading the page. Steps to add tabl

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

How to get the height of a div using jQuery ?

In this article, we will learn how to get the height of a div using jQuery. In jQuery, height method is used to get the height of any element in HTML. The height method sets and returns the height of the HTML elements. Method 1: The height() method returns the first matched element's height, But the

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

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

How to apply CSS in last child of parent using jQuery ?

In this article, we will see how to set styles in the last child of the parent element using jQuery. To set the style on the last child of parent, we use jQuery :last-child selector. The :last-child selector is used to select every element that is the last child of its parent element. Syntax: $("Sel

How to redirect to a particular section of a page using HTML or jQuery?

Redirection will take the user to the desired page or section of the website that the user wants to visit. We will do it using HTML and jQuery differently. Let us take a look at the practical implementations. Table of Content Method 1: Using HTMLMethod 2: Using JQueryMethod 1: Using HTMLOne can use

How to add a title in anchor tag using jQuery ?

In this article, we will see how to add a title in the anchor tag using jQuery. The title property is used to specify extra information about the element. When the mouse moves over the element then it shows the information. The prop() method is used to add properties and values to the element using

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

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( newC