Hello Readers,
Here we will discuss about jquery .append() and .prepend() methods.
jQuery .apend method: jQuery .append() method insert any content or data inside in sentence at the last index. In other word .append() method puts content-inside an element(making content as it's child) definite through-at the end of the element in the set of similar elements.
Syntax: .append( function(index, html) ) Signature
Example 1: jQuery append() method.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#btn').one('click', function() {
$('.testtable td').append(function(index, html) {
return html +': ' + index;
});
});
});
</script>
</head>
<body>
<input type="button" value="append button" id="btn" />
<table class="tablejskeyword testtable" border="2">
<tbody>
<tr>
<td>Row 1, Data 1</td>
<td>Row 1, Data 2</td>
</tr>
<tr>
<td>Row 2,Data 1</td>
<td>Row 2, Data 2</td>
</tr>
</tbody>
</table>
</body>
</html>
jQuery .prepend method: jQuery .prepend() method insert any content or data inside in sentence at the first index. In other word .prepend() method puts content-inside an element(making content as it's parent) definite through at the first of the element in the set of similar elements.
Syntax: .prepend( function(index, html) ) Signature
Example 1: jQuery prepend() method.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#btn').one('click', function() {
$('.testtable td').prepend(function(index, html) {
return html +': ' + index +' - ';
});
});
});
</script>
</head>
<body>
<input type="button" value="prepend button" id="btn" />
<table class="tablejskeyword testtable" border="2">
<tbody>
<tr>
<td>Row 1, Data 1</td>
<td>Row 1, Data 2</td>
</tr>
<tr>
<td>Row 2,Data 1</td>
<td>Row 2, Data 2</td>
</tr>
</tbody>
</table>
</body>
</html>
If we want to move HTML tags up and down inside the define tag, then .append() and .prepend() also useful for this type of task.
Here you can check following example for the same task.
Example 3: jQuery .append() method for moving up HTML tag.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>append demo</title>
<style>
p { background: yellow; }
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<strong>Hello world!!!</strong>
<p>I would like to say: </p>
<script type="">
$( "p" ).append( $( "strong" ) );
</script>
</body>
</html>
Example 7: jQuery .prepend() method for moving up HTML tag.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>prepend demo</title>
<style>
p { background: yellow; }
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>I would like to say: </p>
<strong>Hello world!!!</strong>
<script type="">
$( "p" ).prepend( $( "strong" ) );
</script>
</body>
</html>
Thanks
0 Comment(s)