HTML'de bir öğeyi başka bir öğenin içine taşımak

Bir div öğesini başka bir div’in içine taşıyalım. Örneğin aşağıdaki div’i, tüm alt öğeleri ile beraber:

<div id="kaynak">
...
</div>

şunun içine taşıyalım:

<div id="hedef">
...
</div>

Böylece aşağıdakini elde edelim:

<div id="hedef">
  <div id="kaynak">
    ...
  </div>
</div>

jQuery yolu

appendTo fonksiyonunu kullanmak isteyebilirsiniz (öğenin sonuna ekler):

$("#kaynak").appendTo("#hedef");

Alternatif olarak prependTo metodunu da kullanabilirsiniz (bu ise öğenin başına ekler):

$("#kaynak").prependTo("#hedef");

Aslında aynı işlemi JavaScript’in appendChild() metodu ile de yapabiliriz, ki böylece jQuery’yi içe aktarmamıza gerek olmaz.

// kanyak div'i
var kaynak = document.getElementById('kaynak'));

// hedef div'i
document.getElementById('hedef').appendChild(kaynak);