Move an Element Into Another Element-Dynamic Element Creation In jQuery

Wikitechy | 575 Views | jquery | 03 Jun 2016

 

  • In jQuery the append method is used to add the content inside of every matched element.
  • In jQuery the Prepend method is used to prepends the content inside of every matched element.

Syntax:

$(selector).append(content,function(index,html))

Parameter    

Description

content        

Required. Specifies the content to insert (can contain HTML tags)

Possible values:

ü  HTML elements

ü  jQuery objects

ü  DOM elements

function(index,html)

Optional.

Specifies a function that returns the content to insert

ü  index - Returns the index position of the element in the set

ü  html - Returns the current HTML of the selected element












Sample Code: 

<!DOCTYPE html>
<html>
<head> 
    <title>

        wikitechy-create controls dynamically in jquery
    </title> 
    <script
 src="http://code.jquery.com/jquery.js"></script>
    <script>

        $(document).ready(function(){
            $("button").click(function(){
                // Inside the <div> but after existing content (append)
                $("div").append("<div>dynamically created div tag inside another div tag</div>");
            });
        });
    </script>
</head>
<body>
    <button>
WikiTechy - Add new controls and div element dynamicaly</button>
    <p>
Click above button to dynamically add div element below</p>
    <div
id="SecondPara">Hi from Wikitechy</div>
</body> 
</html>

Code Explanation:


    Inside the <script src= ” http://code.jquery.com/jquery.js “> </script> the ajax library has been called using the (src)=source attribute.

    Here we have created div using, div element with its id as “SecondPara”.

    The $(document).ready(function);  - specifies that the document to be fully loaded and ready before working with it, in order to prevent any jQuery code from running before the document is finished loading.

    $("button").click(function(){ - here is the button click event, which has been called here as element selector whose element “button” has been assigned for the click function.

    Here we are using the element selector “div” where we assign the prepend function in the element div “dynamically created div tag inside another div tag”.

Sample Output:


    Here in this output we have shown the button” WikiTechy - Add new controls and div element dynamicaly” , where initially there is no div element to be added dynamically as shown here.

    Here in this output we have shown the button” WikiTechy-Add new list item” clicked for 1 time where the new div element “dynamically created div tag inside another div tag” in the window as shown.


    Similarly, here in this output we have shown the button” WikiTechy-Add new list item” clicked for 2 time where the new div element “dynamically created div tag inside another div tag” in the window as shown.


    In the same way here in this output we have shown the button” WikiTechy-Add new list item” clicked for 3 time where the new div element “dynamically created div tag inside another div tag” in the window as shown.




Workshop

IOT Hackathon
Webinar

Join our Community

Advertise