Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Jquery difference between .append() and .after() method

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 162
    Comment on it

    Hello Readers,


    Often, we see that jQuery .append() method and jQuery .after() method work similarly, but there is a little bit difference between these methods.


    Here we will discuss about functionality of following functions and it working rule.


    jQuery .apend method: jQuery .append() method insert any content or data inside in sentence at the last index. In other word .append() method puts content-inside an element(making content as it's child) definite through-at the end of the element in the set of similar elements.


    Whereas ,


    jQuery .after() method: jQuery .after() method puts the content or element after the specified element. In other word .after() method insert the data outside an element (making the content it's sibling) in the set of matched elements.


    Here is the following example for differentiate to jQuery .append(), .prepend(), .after(), .before() functions.

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $('.div3010').append('<span>1. Append</span>').prepend('<span>2. Prepend</span>').before('<span>3. Before</span>').after('<span>4. After</span>');
    });
    </script>
    <style type="text/css">
    .body3010 {padding:50px;}
    .div3010 {border:2px solid #bbb;background-color:#eee;padding:10px;margin:10px auto;}
    .body3010 span {display:block;width:65px;font:bold 12px Arial,Sans-Serif;color:white;padding:5px 10px;background-color:black; }
    </style>
    </head>
    <body class="body3010">
    <div class="div3010">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the.</div>
    </body>
    </html>
    


    Thanks


 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: