ReplaceWith and ReplaceAll Methods in jQuery

 <!DOCTYPE html>

<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ReplaceWith and ReplaceAll Methods in jQuery</title>
<style>
    body {
        font-family: arial
    }

    #box {
        background: lightgreen;
        padding: 10px;
        border: 1px solid #000;
    }
</style>

<body>
    <h1>jQuery ReplaceWith() & ReplaceAll() Methods</h1>
    <div id="box">
        <h2>Test Box</h2>
        <p>Lorem, ipsum <span>dolor sit amet</span> consectetur adipisicing elit. Reiciendis magnam expedita asperiores
            autem, minima sed cupiditate maiores cumque debitis optio. Aperiam eos, officiis necessitatibus laudantium
            magni error reiciendis harum quam!</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolores repellendus magni asperiores dicta,
            dignissimos numquam dolorum quas necessitatibus explicabo id, et, reiciendis minus delectus omnis molestiae
            sunt quod soluta aperiam!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non ea et cumque quos provident excepturi sit
            nihil, repudiandae repellat optio suscipit ipsum iste! A laudantium sequi esse aliquid, accusantium placeat!
        </p>
    </div>
    <br>
    <button id="replaceWithBtn">ReplaceWith</button>
    <button id="replaceAllBtn">ReplaceAll</button>
    <button id="replaceAllBtnFirst">ReplaceAllFirst</button>
    <script src="js/jquery-3.7.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#replaceWithBtn").click(function () {
                $("#box p:first").replaceWith("<h3>This is ReplaceWith Content</h3>");
            });

            $("#replaceWithBtn").click(function () {
                $("#box p:nth-child(3)").replaceWith("<h3>This is ReplaceWith Third Content</h3>");
            });

            //replaceAll() will replace only with Tag elements
            $("#replaceAllBtn").click(function () {
                $("<h3>Hello World</h3>").replaceAll("#box p");
            });

            $("#replaceAllBtnFirst").click(function () {
                $("<h3>Only First will be changed</h3>").replaceAll("#box p:first");
            });
        });
    </script>
</body>

</html>






Comments

Post a Comment

Popular posts from this blog

Basic Syntax in jQuery

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < link rel = "stylesheet" href = "css/style.css" > </ head > < body >     < h1 > jQuery Syntax </ h1 >     < div id = "test1" >         < h2 > Test Box 1 </ h2 >         < p > Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel aliquid molestias cum maiores perferendis             accusantium odit tempora doloribus aperiam, deserunt aliquam, magnam porro nihil quas qui dolorum placeat,             delectus aspernatur. </ p >     </ div >     < div id = "test2" >         < h2 > Test Box 2 </ h2 >  ...
Read more

Event "Target" Property in jQuery

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < meta http-equiv = "X-UA-Compatible" content = "ie=edge" >     < link rel = "stylesheet" href = "css/Event_Target_Property.css" >     < title > Event Target Property </ title > </ head > < body >     < h1 > jQuery Event.target Property </ h1 >     < div id = "box" >         < h2 > Test Box </ h2 >         < p > Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab, expedita rem maiores doloribus veritatis,             magnam, vitae placeat officiis laboriosam itaque velit autem! Impedit eos, adipisci numquam corrupti hic             r...
Read more