javaScript YENİ ELEMAN OLUŞTURMA- EKLEME-SİLME-KOPYALAMA

Bir HTML belgeye yeni bir öğe eklemek isteyebiliriz. İlk adım, eklemek istediğiniz düğümü (öğe) oluşturmaktır, sonraki adım belgede onu eklemek istediğiniz yeri bulmaktır ve son adım eklemeyi yapmaktır. Bir düğüm oluşturmak için kullanılan sözdizimi çok basittir, yalnızca belge nesnesinin bir methodu (yöntemini) çağırırsınız.

HTML DOM createElement () Yöntemi


CreateElement() method, belirtilen ada sahip bir öbek düğümü oluşturur.

İpucu : Metin düğümü oluşturmak için createTextNode() methodu kullanın.

İpucu : HTML Eleman oluşturulduktan sonra belgeye eklemek için eleman.appendChild() veya eleman.insertBefore() method'larını kullanın.

SÖZDİZİMİ :


document.createElement(nodename)

ÖRNEK :

Bir <p> öğesi oluşturun ve bir <div> öğesine ekleyin:


// Bir p eleman oluşturun

var el = document.createElement("P");

// Bir text eleman oluşturun

var t = document.createTextNode("javaScript dersi");

// p elemana metni(text) ekleyin

el.appendChild(t);   

// id="test" olan div'e p elemanı ekleyin

document.getElementById("test").appendChild(el); 

HTML DOM createTextNode () Yöntemi


CreateTextNode() methodu, belirtilen metni içeren bir Metin Düğümü oluşturur.

İpucu: Metin Düğümü oluşturulduktan sonra öğeyi bir öğeye eklemek için element.appendChild() veya element.insertBefore() methodu kullanın.

SÖZDİZİMİ :


document.createTextNode(text)

metin içeren bir <p> öğesi oluşturun:

ÖRNEK :


// Bir p eleman oluşturun

var el = document.createElement("P");

// Bir text eleman oluşturun

var t = document.createTextNode("javaScript dersi");

// p elemana metni(text) ekleyin

el.appendChild(t);   

HTML DOM appendChild () Yöntemi


appendChild() methodu, belirtilen bir üst düğümün alt öğelerinin sonuna bir düğüm ekler. Belirli bir alt öğe belgedeki varolan bir düğüme başvuruyorsa, appendChild() onu geçerli konumundan yeni konuma taşır. Düğüm önce kaldırılır, daha sonra yeni konuma eklenir.

NOT :Bu methodu, bir öğeyi bir öğeden diğerine taşımak için de kullanabilirsiniz.

SÖZDİZİMİ :


node.appendChild(node)

ÖRNEK :


// Yeni bir paragraf öğesi oluşturun ve belge gövdesinin sonuna ekleyin

var p = document.createElement("p");

document.body.appendChild(p);

HTML DOM insertBefore () yöntemi


insertBefore() methodu, bir düğümü çocuk olarak, belirttiğiniz mevcut bir çocuğun hemen önüne ekler.

Mevcut bir öğeyi eklemek / taşımak için insertBefore() methodu'da kullanabilirsiniz.

SÖZDİZİMİ :


node.insertBefore(yeni, hedef)

yeni : Gereklidir. Eklemek istediğiniz düğüm nesnesi

hedef : Gereklidir. Bir düğüm veya null değerleri vermek gerekir. Sağlanamaması veya geçersiz değerlerin verilmesi, farklı tarayıcı sürümlerinde farklı şekilde cevaplar olabilir. Alt düğüm. Belirtilmezse, insertBefore() methodu newnode'un sonuna ekler. Döndürülen değer, eklenen düğümdür.

ÖRNEK :

HTML:


<p class="test">javascript dersi</p>

<div class="dene"> <p class="abc">deneme</p></div>

<button onclick="test()">Tıkla</button>

javaScript:


function test() {

  var el= document.querySelector(".test");

  var x = document.querySelector(".dene");

  var abc =document.querySelector(".abc");
 
  x.insertBefore(el,abc);
}

Yukarıda ki örnekte class="test" olan parağrafı div içerisine hedef olarak belirtilen class="abc" olan paragrafın önüne inserbefore() methodu ile taşınır. Hedef belirtmeden bir örnek yapalım yukarıda belirtilen HTML elemanları geçerli sadece javaScript komutlarını yazalım.


function test() {

  var el= document.querySelector(".test");

  var x = document.querySelector(".dene");

  var abc = null;
  
  x.insertBefore(el,abc);
}

Yukarıda ki örnekte class="test" olan paragrafı div içerisine hedef olarak belirtilen abc değişkeni bu sefer null (boş) olarak belirttik newnode'un (div'in) içerisine, son eleman olarak eklenir.

HTML DOM removeChild () Yöntemi


removeChild() methodu, belirtilen öğenin belirtilen bir alt düğümünü kaldırır. Kaldırılan düğümü bir Düğüm nesnesi olarak döndürür veya düğüm yoksa null döndürür .

Not :Kaldırılan alt düğüm bellekte hala var, ancak Kaldırılan çocuk düğüm artık DOM'un parçası değildir. Bununla birlikte, bu method tarafından döndürülen referansla kaldırılan çocuğu daha sonra bir elemana eklemek mümkündür

İpucu: Kaldırılan düğümü aynı belgeye eklemek için appendChild() veya insertBefore() methodu kullanın.

SÖZDİZİMİ :


node.removeChild(node)

ÖRNEK :

DIV içerisinde ki parağrafı kaldırın.

HTML:


<div class="dene">

  <p class="abc">javascript dersi</p>
  
</div>

javaScript :


  var x = document.querySelector(".dene"); 
  
  var el = document.querySelector(".abc");

  x.removeChild(el);

HTML DOM replaceChild () Yöntemi


replaceChild() methodu, belirtilen düğümün bir alt düğümünü başka bir düğümle değiştirir.

SÖZDİZİMİ :


node.replaceChild(yeni, değişecek)

yeni : Yeni eklenecek düğüm.

değişecek :Silinip değiştirilecek düğüm.

ÖRNEK :

HTML :


<ul id="liste"><li>Ankara</li><li>Bolu</li><li>Adana</li></ul>

<button onclick="deneme()">test</button>

JavaScript


function deneme()
{
var textnode = document.createTextNode("İstanbul");
  
var liste = document.getElementById("liste").childNodes[0];
  
liste.replaceChild(textnode,liste.childNodes[0]);
}

ÇIKTI :

  • Ankara
  • Bolu
  • Adana

Yukarıda ki örnekte ilk liste elemanı Ankara ili, butona tıklayınca İstanbul olarak değişmekte.

HTML DOM cloneNode () Yöntemi


CloneNode() methodu, bir düğümün bir kopyasını oluşturur ve kopyayı döndürür.

CloneNode() methodu, tüm öznitelikleri ve değerleri kopyalar.

İpucu : Kopyalanan düğümü belgeye eklemek için appendChild() veya insertBefore() methodu kullanın.

İpucu: Tüm alt öğeleri ile kopyalamak istiyorsanız , derin parametre değerini true değerine, aksi takdirde false değerine ayarlayın.

Sözdizimi :


node.cloneNode(derin)

Derin :İsteğe bağlı. Düğümün, tüm torunlarının kopyalanması gerekip gerekmeyeceğini belirtir.

ÖRNEK:

HTML:


<div style="border:1px solid black;background-color:silver">

  <p style="color:steelblue;">javaScript</p>
  
  <p style="color:black;">javaScript</p>
  
  <p style="color:royalblue;">javascript</p>
  
</div>

<br/>

javaScript :


  var el = document.getElementsByTagName("DIV")[0];
  
  var kopya = el.cloneNode(true);
  
  document.body.appendChild(kopya);


İsa Yalçın 01/08/2018

Ben addChild ile yeni nesneleri oluşturdum başka bir buton ilede oluşturdugum nesnelerin silinmesini istiyorum bunu nasıl yaparım

yönetici 01/08/2018

İsa, yeni oluşturduğun butona sil() fonksiyonu ekle

<button onclick="sil()">Element sil</button>

javascript:

function sil(){

var el = document.getElementById("test");

el.parentNode.removeChild(el);

}

Ferdi 02/09/2019

merhaba; javascripte yapmak istediğim bir şey var. "#tasinacakdiv" alanını sayfada yeni oluşturacağım "#xxxx" divinin altına taşıma istiyorum. bunu nasıl yapabilirim acaba. yardımcı olursanız sevinirim

yönetici 02/09/2019

Ferdi, id'ni removeAttribute() sil. setAttribute() istediğin yerde oluştur Bakın

Emre 31/01/2020

Sitede bir liste var komut listesi ben şimdi bunu CSS ile gizledim. sonra bir buton koydum CSS hover ekliyerek açmaya çalıştım oldu fakat ben imleci uzerine gelince değilde üzerine basınca açılmasını istiyorum nasıl olacak

yönetici 01/02/2020

Emre, şu iki konuya bak örnekler var. fonksiyon ekle ve css ekle.

AbdulhamitTuran 28/12/2020

iki ayrı div'im var. birisi yapılacaklar listesi diğeri tamamlananlar listesi. Yapılacaklar listesindeki görev tamamlanınca button'a basınca tamamlananlara taşımasını istiyorum.Yapılacaklardan silinsin.

tamamlaButonu.onclick=function(){
      tamamlandıElementi.appendChild(pElementi);
      yapılacaklarElementi.removeChild(pElementi);
    }

Şeklinde yapıyorum ancak. silinmesine rağmen diğer tarafa taşınmıyor

yönetici 30/12/2020

Abdulhamit, Remove özelliğini fonksiyondan sil, elementi taşıyormu bir gör. Dikkat edersen elementi hem taşıyorsun hemde o elementi siliyorsun. Silmeden evel elementin ismini değiştir.

Ekrem Bye 19/01/2021

Merhabalar. Ben bir listedeki elemanlari html sayfasinda bir tabloya yelestirdim. Daha sonra tabloda her elemanin karsisina buton ekleyip tiklandiginda baska bir tabloya elemanin sadece fiyat ve isim bilgilerini eklemek istiyorum. Yardimci olursaniz sevinirim. Tesekkurler.

yönetici 22/01/2021

Ekrem, zamanımız kısıtlı olduğundan yardımcı olamuyoruz. Ama doğru konuyu bulmuşun yukarıdaki konuyu vasıtası ile yapabilirsin.

Hope 25/02/2021

Örneğin; böyle bir HTML kodum var ben <'leri < (küçüktür) ve >'leri > (büyüktür) 'e dönüştürüp, 'dan dışarıya atmasını istiyorum, nasıl yapabilirim?

yönetici 27/02/2021

Sorunu tam anlamadım veritabanın var html kodları ayıklamak istiyorsan PHP Şu konuya bak
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır.

1236

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML RESİM EKLEME
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS YATAY MENÜ YAPIMI
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.