Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • jQuery .append() and .prepend() method

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 142
    Comment on it

    Hello Readers,


    Here we will discuss about jquery .append() and .prepend() methods.


    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.


    Syntax: .append( function(index, html) ) Signature
    


    Example 1: jQuery append() method.

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $('#btn').one('click', function() {
            $('.testtable td').append(function(index, html) {
                return html +': ' + index;
            }); 
        });
    });
    </script>
    </head>
    <body>
    <input type="button" value="append button" id="btn" />
    <table class="tablejskeyword testtable" border="2">
        <tbody>
            <tr>
                <td>Row 1, Data 1</td>
                <td>Row 1, Data 2</td>
            </tr>
            <tr>
                <td>Row 2,Data 1</td>
                <td>Row 2, Data 2</td>
            </tr>
        </tbody>
        </table>
    </body>
    </html>
    


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


    Syntax: .prepend( function(index, html) ) Signature
    


    Example 1: jQuery prepend() method.

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $('#btn').one('click', function() {
            $('.testtable td').prepend(function(index, html) {
                return html +': ' + index +' - ';
            }); 
        });
    });
    </script>
    </head>
    <body>
    <input type="button" value="prepend button" id="btn" />
    <table class="tablejskeyword testtable" border="2">
        <tbody>
            <tr>
                <td>Row 1, Data 1</td>
                <td>Row 1, Data 2</td>
            </tr>
            <tr>
                <td>Row 2,Data 1</td>
                <td>Row 2, Data 2</td>
            </tr>
        </tbody>
        </table>
    </body>
    </html>
    


    If we want to move HTML tags up and down inside the define tag, then .append() and .prepend() also useful for this type of task.


    Here you can check following example for the same task.


    Example 3: jQuery .append() method for moving up HTML tag.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>append demo</title>
    <style>
    p { background: yellow; }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    </head>
    <body>
        <strong>Hello world!!!</strong>
        <p>I would like to say: </p>
        <script type="">
        $( "p" ).append( $( "strong" ) );
        </script>
    </body>
    </html>
    


    Example 7: jQuery .prepend() method for moving up HTML tag.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>prepend demo</title>
    <style>
    p { background: yellow; }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    </head>
    <body>
        <p>I would like to say: </p>
        <strong>Hello world!!!</strong>
        <script type="">
        $( "p" ).prepend( $( "strong" ) );
        </script>
    </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: