JavaScript Tutorial/jQuery/insertAfter

Материал из Web эксперт
Перейти к: навигация, поиск

Creating HTML elements on the fly

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
$("

Hi there!

").insertAfter("#followMe");
       });
   </script>

<style>

 div { margin:3px; width:50px; position:absolute;
       height:50px; left:10px; top:30px; 
       background-color:yellow; }
 div.red { background-color:red; }
 

</style>

 </head>
 <body>
   <body>

Follow me!

   </body>

</html></source>


Inser query after

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
           $("p").insertAfter("#foo");
       });
   </script>
 </head>
 <body>
   <body>

a

b
 </body>

</html></source>


insertAfter(content): the reverse of $(A).after(B)

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
         $("p").insertAfter( $("b") );
               
        
       });
   </script>
   
 </head>
 <body>
   <body>
        

asdf:

        asdf
   </body>

</html></source>


Insert cloned object

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
             $("b").clone(true).insertAfter("p");


       });
   </script>
 </head>
 <body>
   <body>
Hello

, how are you?

   </body>

</html></source>


Inserts a DOM element after all paragraphs.

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
         $("p").after( document.createTextNode("Hello") );
               
        
       });
   </script>
   
 </head>
 <body>
   <body>

asdf

   </body>

</html></source>


Inserts all paragraphs after an element

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
         $("p").insertAfter( $("b") );
               
        
       });
   </script>
   
 </head>
 <body>
   <body>
        

asdf:

        asdf
   </body>

</html></source>


Inserts some HTML after all paragraphs.

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
          $("p").after("Hello");
               
        
       });
   </script>
   
 </head>
 <body>
   <body>

asdf

   </body>

</html></source>