How to iterate through child elements of a div 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:

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:

How to iterate through child elements of a div 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 table

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

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

How to use jQuery to Search and Replace HTML elements?

Using jQuery, you can dynamically search and replace HTML elements on a webpage. By selecting elements and binding actions to events, you can manipulate their content or structure in response to user interactions or other triggers ApproachIntegrate the jQuery library hosted on a content delivery net

How to change an HTML element name using jQuery ?

Given an HTML document and the task is to replace an HTML element by another element. For example: we can change an element <b> with <h1> element without changing any other property.Approach: Select the HTML element which need to be change.Copy all attributes of previous element in an ob