Introduction with JQUERY - Adding Elements

Guest Posts Paolo Nikko Nuñal

With the introduction of JQUERY, adding new elements/ content is as easy using the built in methods. This is useful if you are trying to insert some content to your HTML document. One of the most common of which are the following below.


append () - Inserts content at the end based on the chosen element.
prepend() - Inserts content at the beginning based on the chosen element.
after() - Inserts content after the chosen selected element.
before() - Inserts content before the chosen selected element.




Learn HTML5/PHP/AJAX Web Programming from Scratch – An amazing course from Dr. Richard Stibbard. Usually I only promote my own courses, but this course is very impressive, so I cut a deal with Dr. Stibbard … You can also find Richard’s website here





In this code below you can actually see how we append and add a text to the last element.

Code


<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("#btn-dog").click(function(){
        $("#sentence").append("<b>Dog</b>.");
     });
    $("#btn-fox").click(function(){
        $("#sentence").append("<b>Fox</b>.");
     });
 });
</script>
</head>
<body>
<p id="sentence">The quick brown fox jumps over the lazy - </p>
<button id="btn-dog">Append - Dog</button>
<button id="btn-fox">Append - Fox</button>
</body>
</html>


Base on the example above, we are actually adding the word "dog" or "fox" depending on the button is being pressed. This will then be added after the sentence.

On the other hand the prepend() method adds any html code before the selected "id".

Code


<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("#btn-dog").click(function(){
        $("#animal").prepend("<b>Dog</b>.");
     });
    $("#btn-fox").click(function(){
        $("#animal").prepend("<b>Fox</b>.");
     });
 });
</script>
</head>
<body>
The quick brown <span id="animal"> jumps over the lazy - </span>
<button id="btn-dog">Append - Dog</button>
<button id="btn-fox">Append - Fox</button>
</body>
</html>


Based on the example above, we can add any animal on the sentence depending on the button being selected. We are actually pre-appending the animal before the word "jumps".

The next method is the before() and after (). These method inserts content before or after the selected HTML elements.

Code


<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
   $("#btn-before").click(function(){
      $("#middle").before("<b>Before</b>");
    });
$("#btn-after").click(function(){
$("#middle").after("<b>After</b>");
});>
});
</script>
</head>
<body>
<p id="middle">MIDDLE</p>
<button id="btn-before">BEFORE</button>
<button id="btn-after">AFTER</button>
</body>
</html>


Depending on the user's choice, the word "AFTER" will be added after the word MIDDLE and the word "BEFORE" will be added before the word middle. What is different between the prepend and append method is the fact it will automatically add what ever element to the id that you are selecting.




Learn HTML5/PHP/AJAX Web Programming from Scratch – An amazing course from Dr. Richard Stibbard. Usually I only promote my own courses, but this course is very impressive, so I cut a deal with Dr. Stibbard … You can also find Richard’s website here