Hello Readers,
Often, we see that jQuery .append() method and jQuery .after() method work similarly, but there is a little bit difference between these methods.
Here we will discuss about functionality of following functions and it working rule.
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.
Whereas ,
jQuery .after() method: jQuery .after() method puts the content or element after the specified element. In other word .after() method insert the data outside an element (making the content it's sibling) in the set of matched elements.
Here is the following example for differentiate to jQuery .append(), .prepend(), .after(), .before() functions.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.div3010').append('<span>1. Append</span>').prepend('<span>2. Prepend</span>').before('<span>3. Before</span>').after('<span>4. After</span>');
});
</script>
<style type="text/css">
.body3010 {padding:50px;}
.div3010 {border:2px solid #bbb;background-color:#eee;padding:10px;margin:10px auto;}
.body3010 span {display:block;width:65px;font:bold 12px Arial,Sans-Serif;color:white;padding:5px 10px;background-color:black; }
</style>
</head>
<body class="body3010">
<div class="div3010">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the.</div>
</body>
</html>
Thanks
0 Comment(s)