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>



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>


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);
}
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

5425

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