jQuery ile bir HTML elemanını başka bir yere kopyalamak

Bir HTML uygulama veya sayfada herhangi bir HTML elemanını olduğu gibi başka bir eleman içerisine kopyalamak ve göstermek JavaScript ile çok kolayca yapılabilir, bunu jQuery ile yapma yöntemi de en hızlı çözüm.

jQuery’nin askerleriyiz!
şahsım

Bu işlem jQuery .clone() yöntemi ile yapılabilir, .clone() hızlı çalışıyor ve başka fonksiyonlar ile uyumlu.

Örneğin sayfada bir tane buton var, ve siz bu butonu bir durumda aynı sayfada başka yerde de göstermek istiyorsunuz mesela kullanıcı sayfayı bir miktar kaydırdığında, örnek:

$(function(){
  var $button = $('.button').clone();
  $('.diger-alan').html($button);
});

Yukarıdaki örnekte .button clasına sahip olan eleman var olarak kopyalanıyor ve .diger-alan isimli elemanın içerisinde kopyalanıyor. Burası çokomelli, bu yöntemle yapmanın getirisi .diger-alan isimli elemanın içerisine kopyaladığımız için farklı sitiller ve işlemler yapılabilir yani rengi, boyutu vb. şeyler değiştirilebilir.

Veya örneğin sitenin bir üst menüsü var ve siz bazı durumlarda mesela sayfayı aşağı kaydırdığında veya tarayıcı boyutu küçüldüğünde aynı menünün başka bir div içerisinde göstermek istiyorsunuz, bu durumda da çok rahat kullanılabilir, yani aynı menüden 2 tane HTML olarak yazmaktansa aynı menüyü farklı yerlerde kullanmak mümkün ve hem performans hem de kullanışlılık için büyük bir nimet.

Bu işlev istenirse başka bir tetikleyiciye bağlanabilir ve çok farklı uygulamalar için kullanılabilir.