Create Div Element In jQuery

Wikitechy | 1828 Views | jquery | 02 Jun 2016

 

What is div element?

  • The div element is a standard container with no particular semantic meaning. 
  • It is commonly used in web authoring for styling purposes, in conjunction with the style and class attributes. 

What is document.read function in jQuery?

  • In jQuery the $(document).ready() specify the function to operate after the Document Object Model (DOM) is completely loaded.

What is selector.click in jQuery?

  • In jQuery the click event occurs when an element is clicked.
  • when the click event occurs it execute the click () method or attaches a function to run.

What is #selector.append in jQuery?

  • In jQuery the append method is used to add the content to the 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(){
            $("#SecondPara").append("<div><h4>This is newly created div element</h4</div></br>"); 
          });
      });
    </script>
  </head>
 <body>
    <button>
WikiTechy - Add new controls and div element dynamicaly</button>
    <p>
Click above button to dynamically add div element below</p>
    <p
id="SecondPara"></p>
 </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 the button using button element and have created a paragraph section where the  id name is “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 in this statement we use the id selector “SecondPara” assigned for the append function for the element “div,h4”. 

Sample Output:


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


    Here in this output we have shown the button” WikiTechy-Add new list item” clicked for 1st time where the new div & h4 element “This is newly created div element” has be added in the window as shown.


    Similarly, here in this output we have shown the button” WikiTechy-Add new list item” clicked for 2nd time where the new div & h4 element “This is newly created div element” has be added in the window as shown.


     In the sameway, here in this output we have shown the button” WikiTechy-Add new list item” clicked for 3rd time where the new div & h4 element “This is newly created div element” has be added in the window as shown.




Expert Webinars

Wikitechy Live

Join our Community

Advertise