tl  tr
  Home | Tutorials | Articles | Videos | Products | Tools | Search
Interviews | Open Source | Tag Cloud | Follow Us | Bookmark | Contact   
 jQuery > Basic > DOM manipulation

DOM manipulation 

This example shows jQuery way DOM manipulation.

  • append(content) inserts content to the end of each element in the set of matched elements.
  • prepend(content) inserts content to the beginning of each element in the set of matched elements.
  • empty() removes all child nodes of the set of matched elements from the DOM.

File Name  :  
source/JQUERY/basic/dom.html 
Author  :  Sudhakar KV
Email  :  kvenkatasudhakar@gmail.com
view sourceprint?
01<html>
02 <head>
03 <script type="text/javascript" src="js/jquery.js"></script>
04 <script type="text/javascript">
05 
06$(function(){
07 
08  $("#p1b").click( function() {
09 
10        //Append content to the inside of every matched element.
11        $("#p1").append("<b>Hello</b>");
12 
13  });
14 
15 $("#p2b").click( function() {
16 
17        //Prepend content to the inside of every matched element.
18        $("#p2").prepend("<b>Hello</b>");
19 
20  });
21 
22 
23  $("#p3b").click( function() {
24        $("#p3").empty();
25  });
26 
27});
28 
29 
30 </script>
31 </head>
32 <body>
33 
34    <br><p id="p1"> TEST  <input type="button" id="p1b" value="append"  /> </p>
35 
36    <br><p id="p2"> TEST  <input type="button" id="p2b" value="prepend"  /> </p>
37 
38    <br><p id="p3"> TEST EMPTY  </p> <input type="button" id="p3b" value="empty"  />
39 
40 </body>
41 </html>




 
  


  
bl  br