How to get the outer html of an element using jQuery ?

How to use jQuery to Search and Replace HTML elements?

Last Updated : 18 Jun, 2024

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

Approach

Integrate the jQuery library hosted on a content delivery network (CDN), ensuring access to jQuery functionalities.
Two buttons with classes “one” and “two” are defined, each bound to a click event handler using jQuery.
When the “Correct Me!” button is clicked, jQuery targets the <h1> element and replaces its text content with “Geeks for Geeks!”.
Upon clicking the “Add Me!” button, jQuery targets a <span> element and replaces its HTML content with an <h3> element containing the text “You can also Contribute.”.
Basic CSS styles are applied to <h1> elements to change their color to green and align the body content to the center.

Example: The below example shows the above-explained approach.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>jQuery!!!</title>
    <script type="text/javascript"
        src="https://code.jquery.com/jquery-3.5.1.min.js">
        </script>
    <style type="text/css">
        h1 {
            color: green;
        }

        body {
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>Geeks Geeks</h1>
    <br>
    <button class="one">Correct Me!</button>
    <br>
    <br>
    <button class="two">Add Me!</button>
    <br>
    <span></span>
    <script type="text/javascript">
        $(".one").click(function () {
            $("h1").text("Geeks for Geeks!");
        });

        $(".two").click(function () {
            $("span").html("<h3>You can also Contribute.</h3>");
        });
    </script>
</body>

</html>

Output:

gif101

Output

How to get the outer html of an element using jQuery ?

J

joshi08

Improve

Article Tags :

Similar Reads

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

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 jQuery stores data related to an element ?

jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating the terms, jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Aj

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

How to add options to a select element using jQuery?

We will dynamically add the options to the select element using jQuery. jQuery has a lot of in-built methods. But, we will use some of them to accomplish the purpose of dynamically adding the options to the select element as listed below: Table of Content By passing the HTML of the option tag to the

How to select an element by name with jQuery ?

Selecting an element by name with jQuery allows you to target HTML elements using their `name` attribute. This method is commonly used in form handling, where input fields, checkboxes, or radio buttons share the same name, enabling you to easily manipulate or retrieve their values. Table of Content

How to attach a method to HTML element event using jQuery ?

In this article, we are going to learn, how can we attach a method to an HTML element event using jQuery. There are various events like click(), mouseenter(), mouseout(), etc which are available in jQuery. For attaching a method to an HTML elements event, we will need a jQuery method on(), which wil

How to create an HTML element using jQuery ?

In this article, we will see how to create an HTML element using jQuery. To create and append the HTML element, we use the jQuery append() method. The jQuery append() method is used to insert some content at the end of the selected elements. Syntax: $(selector).append( content, function(index, html)

How to find all paragraph elements using jQuery ?

Given a webpage containing paragraph elements and the task is to find every paragraph element using the jQuery module. We have to find the <p> elements from the HTML page, and you can achieve this task by using the element selectors. The element selector will select the element based on the el

How to Select and Manipulate CSS pseudo-elements using JavaScript / jQuery ?

In this article, we will learn how to select and manipulate CSS pseudo-elements using JavaScript (or jQuery). CSS pseudo-elements allow developers to style and enhance specific parts of an HTML document with the help of selectors like::before and::after, which provide the flexibility to add decorati