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.

İlişkili olduğu konular : html, javascript, jquery

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");

sade JavaScript

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);
Bu yazı topluluk tarafından oluşturuldu. Lisans bilgisine bakabilirsiniz. Yanlış veya eksik bilgileri düzenlemek için github üzerinden katkıda bulunabilirsiniz.

Kategoriler: Yazı, HTML

Okumaya devam et!

HTML tabloları: Gelişmiş özellikler ve erişilebilirlik

Bu kılavuzdaki ikinci makalede, HTML tablolarının bazı daha gelişmiş özelliklerine ve ayrıca görme engelli kullanıcılar için tabloların erişilebilirliğine bakıyoruz.

Web nasıl çalışır?

Bu makalede bir web sayfasını bilgisayarınızdaki veya telefonunuzdaki bir web tarayıcısında görüntülediğinizde ne olacağına basitçe bakacağız.

İşaretlenmemiş bir HTML listesi nasıl oluşturulur

Sıralanmamış bir listedeki liste işaretlerinin rahatsız edici olduğunu düşünüyorsanız bu işaretleri kolayca kaldırabilirsiniz.

RegEx ile XHTML etiketlerini nasıl eşleştiririz?

Aşağıdaki açılış etiketlerini kapatma etiketleri ile eşleştirmek istiyorum: Peki bunu düzenli ifadeler ile yapabilir miyiz? Örneğin aşağıdaki ifade işe yarar mı? Kısa cevap: işe yaramaz.

Yorum Gönderin

E-posta hesabınız yayımlanmayacak.

koddla
Tema Mundana by WowThemes.net.