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:
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"
+'"/>';});
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.