Adding Elements to DOM using JQuery


In previous article, we discussed about Effects of JQuery. In this article, we will cover functions to insert elements dynamically into the DOM. JQuery provides functions to insert/remove/copy elements into DOM dynamically. We can insert an element before or after a particular element. We can use .insertBefore() or .before() and  .insertAfter() or .after() functions to insert a element before/after an element as shown below:

<html>
  <head>
    <title>JQuery Sample HTML Page</title>
<script src="jquery-1.4.2.min.js" type="text/javascript">
</script>
<script language="javascript" type="text/javascript">
$(function(){$('#myButton').click(function(){
$('#myDiv').after('<input type="button" value="My Text"/>');//Functionality wise same as .insertAfter().
$('#myDiv').before('<input type="button" value="My Text"/>');//Functionality wise same as .insertBefore().
$('<input type="button" value="My Text"/>').insertAfter('#myDiv');//Here, selector expression comes in the end of statement.
$('<input type="button" value="My Text"/>').insertBefore('#myDiv');
//$('#myDiv').remove();//Removes everything inside myDiv along with it.
$('input[type="button"]').filter(function(){return $(this).attr('value') != 'Click Me';}).each(function(index){$(this).val(index);});
});
});
</script>
  </head>
  <body>
<div id="myDiv" style='background:red;'>
<input type="button" value="Click Me" id="myButton" style="height:100px"/>
</div>
  </body>
</html>

In last statement, we are using .each() function to loop through the elements returned by selector one by one. Index parameter will give the index of the element in the list. We can use filter() to reduce set of matched elements [all buttons]  using function or selector criteria. The output will be as shown below:

1.gif
 
We can use clone() for creating a copy of an element as shown below:
 
$('#myDiv').after($('#myButton').clone());
 
It will create a copy of myButton and inserts it after myDiv.  We can use html() to replace the html content of a element with new one for an element like div as shown below:
 
$('#myDiv').html('<input type="button" value="Click Me More" id="myButton" style="height:100px"/>');
 
We can use .append() to insert HTML content or JQuery object to the end of each element in the matched set as shown below:
 
Calling $('#myDiv').append('my new Text');  on
 
<div>  <div id="myDiv"></div>  <div>Another Div</div> </div> will make output as 
<div>  <div id="myDiv">my new Text</div>  <div>Another Div</div> </div>.
 
We will finally cover wrap() function and end the things. wrap() allows us to wrap the list of elements within specified html. We can use wrap elements using JQuery objects or HTML tag or calling wrapping callback function. Wrapping function will return the structure for wrapping around the elements of the matched list. It can be done in either of the two ways shown below:
 
$('#myButton').wrap('<div style=background:"blue"/>');
 
(or)
 
$('#myButton').wrap(function(){return '<div style="background:' +"yellow" +'"/>';});
 
For list of DOM manipulation functions, refer http://api.jquery.com/category/manipulation/.
 
I am ending the things here. In next article, we will look into Ajax features of JQuery in depth. I hope this article will be helpful for all.