JavaScript DHTML/jQuery/clone

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

Add cloned tag

   
<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
           $("p").clone().add("<span>Again</span>").appendTo(document.body);
        });
    </script>
    <style>
      div { width:40px; height:40px; margin:10px; float:left;}
    </style>
  </head>
  <body>
    <body>
          <p>Hello</p>
 
  </body>
</html>



Clone matched DOM Elements

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

        });
    </script>

  </head>
  <body>
    <body>
       <b>Hello</b><p>, how are you?</p>
    </body>
</html>



Clone paragraph tag

   
<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
           $("p").clone().appendTo(document.body);
        });
    </script>
    <style>
      div { width:40px; height:40px; margin:10px; float:left;}
    </style>
  </head>
  <body>
    <body>
          <p>Hello</p>
 
  </body>
</html>



clone(true): moving copies of the elements, and their events, to another location in the DOM.

 

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
              $("b").clone(true).prependTo("p");
        });
    </script>
  </head>
  <body>
    <body>
            <b>Hello</b><p>, how are you?</p>
                 
    </body>
</html>



clone(): useful for moving copies of the elements to another location

 

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
              $("b").clone().prependTo("p");
        });
    </script>
  </head>
  <body>
    <body>
            <b>Hello</b><p>, how are you?</p>
                 
    </body>
</html>