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 :

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.

• true : Düğümün, özelliklerini ve alt öğelerini kopyalamak.
• false :Değer belirtilmese varsayılı değer. Yalnızca düğümü ve özelliklerini kopyalayın.

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

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

function sil(){

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

el.parentNode.removeChild(el);

}

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