Veysel Uğur KIZMAZ

jQuery ile HTML Elemanı Kopyalama

16.06.2012Okunma Sayısı: 7260Kategori: JQuery

 Bu makalemizde jQuery ile HTML elemanını sayfa içinde başka bir yere kopyalama işlemini inceleyelim.

 
Örnek uygulamamızda butona tıkladığımızda resim nesnemizi, son hr’den sonraya kopyalayacağız.
 
  1. <html>
  2.             <head>
  3.                         <title>Javascript Prototype</title>
  4.                         <script src="jquery-1.5.1.js"></script>
  5.                         <script type="text/javascript">
  6.                                    var kopyalanacak = null;
  7.                                    $(document).ready(function(){
  8.                                                $("button:first").click(function(){
  9.                                                            kopyalanacak = $("img:first").clone();
  10.                                                            $("hr:last").after(kopyalanacak);
  11.                                                });
  12.                                    });
  13.                         </script>
  14.             </head>
  15.             <body>
  16.                         <img src="resim.jpg" id="pbResim"/>
  17.                         <hr/>
  18.                         <button>Kopyala</button>
  19.                         <hr/>
  20.             </body>
  21. </html>

 

 
  1. kopyalanacak = $(“img:first”).clone(); ilk resmi “kopyalanacak” değişkenine kopyalar.
  2. $(“hr:last”).after(kopyalanacak); son hr’den sonraya kopyalanacak değişkeninin içindeki değeri atar, yani resmi yapıştırır.
  3. 1. maddede clone() dediğimizde sadece elemanı kopyalıyoruz. Clone(true) şeklinde kullandığımız zaman elemana atanmış eventları da kopyalıyoruz.

 

Veysel Uğur KIZMAZ
Bilgisayar Mühendisi
veysel@ugurkizmaz.com