AppendTo and PrependTo Method in jQuery

 <!DOCTYPE html>

<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>AppendTo and PrependTo Method in jQuery</title>
<style>
    body {
        font-family: arial
    }

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

<body>
    <h1>jQuery AppendTo & PrependTo Methods</h1>
    <div id="box">
        <h2>Test Box</h2>
        <p>Lorem, ipsum <span>dolor sit amet</span> consectetur adipisicing elit. Harum odio iure voluptatibus
            praesentium quae temporibus sed sunt dolorum reiciendis magni ea, corporis consectetur eum dolorem
            asperiores molestias dicta repellat quos.</p>
    </div>
    <br>
    <button id="appendBtn">AppendTo</button>
    <button id="prependBtn">PrependTo</button>
    <script src="js/jquery-3.7.1.min.js"></script>
    <script>
        //Main Difference between append() and appendTo() is that in append(), first "selector" comes and
        //after "content" comes while in appendTo(), first "content" comes and after "selector" comes as
        //shown below (same difference in prepend() and prependTo()):
        $(document).ready(function () {
            $("#appendBtn").click(function () {
                $("<h3>This is AppendTo Heading</h3>").appendTo("#box");
            });

            $("#prependBtn").click(function () {
                $("<h3>This is PrependTo Heading</h3><p>This is just text</p>").prependTo("#box");
            });
        });
    </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