Knowledge Walls
Gopal Rao
Mumbai, Maharashtra, India
Passcode:
Append and prepend in jquery example in Jquery functions of JQuery Examples
3575 Views
Hints 
append() used to add element inside an element in forward.
Example: 1 Explain append() function,In which numbers add into element from 1 to 5 in forward.

prepend() used to add element inside an element in backward.
Example: 2 Explain prepend() function,In which numbers add into element from 5 to 1 in backward.
Example: 1 Explain append() function,In which numbers add into element from 1 to 5 in forward
<html>

<head>
    <title>HTML-JQuery</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            var numbers = 5;
            for (var i = 1; i <= numbers; i++) {
                $("#divPages").append('<div class="page">' + i + '</div>');
            }
        });
    </script>
    <style>
        #divPages {
            float: left;
        }
        #divPages div {
            float: left;
            margin: 5px 10px;
        }
    </style>
</head>

<body>
    <div id="divPages"></div>
</body>

</html>
Example: 1 Demo 
Example: 2 Explain prepend() function,In which numbers add into element from 5 to 1 in backward
<html>

<head>
    <title>HTML-JQuery</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            var numbers = 5;
            for (var i = 1; i <= numbers; i++) {
                $("#divPages").prepend('<div class="page">' + i + '</div>');
            }
        });
    </script>
    <style>
        #divPages {
            float: left;
        }
        #divPages div {
            float: left;
            margin: 5px 10px;
        }
    </style>
</head>

<body>
    <div id="divPages"></div>
</body>

</html>
Example: 2 Demo 
Next Topics
Next lessons of current book.
Previous Topics
Previous lessons of current book.
Best Lessons of "JQuery Examples"
Top lessons which are viewed more times.
  Copyright © 2014 Knowledge walls, All rights reserved
KnowledgeWalls
keep your tutorials and learnings with KnowledgeWalls. Don't lose your learnings hereafter. Save and revise it whenever required.
Click here for more details