Find it:

Friday, June 28, 2013

JQuery add (.append) and remove (.empty or .remove) divs

Good morning everyone, recently I'm learning how to work with JQuery plugins and methods, and I have to tell you is so easy and make your web look so much better.

This post is about and easy way to add and remove any kind of element in your web using JQuery functions.

.append() 

<script>
$("#link").click(function(){
    $("#add").append(" <b>Appended text</b>.");
  });
</script>

<html>
<div id="add"></div>
<p id="link">Append text</p>
</html>


This example just add some Text to the div with id="add".

.empty()


<script>
$("#link-empty").click(function(){
    $("#add").empty();
  });
</script>

<html>
<div id="add"></div>
<p id="link-empty">Empty Div </p>
</html>
And this example is going to empty all the elements of the div with id="add" only on click in the Remove text.


.remove()


<script>
$("#link-remove").click(function(){
    $("#add").remove();
  });
</script>

<html>
<div id="add"></div>
<p id="link-remove">Remove Div</p>
</html>
And this example is going to all Div (add) from your site.



I'm using the JQuery library jquery-1.10.1.js. Download




No comments:

Post a Comment