javaScript Element.insertAdjacentHTML()

Biliyorsunuz ki DOM ağacını işlemek çok yavaşdır. Web sitelerimizi AJAX kullanarak daha dinamik hale getirmekteyiz. Websiteler için önemli olan hız faktörünü az kayıpla DOM ağacını işlemek isteriz.

HTML içeriği ve metin içeriği eklemek için daha önce kullanılmış olduğumuz yöntemler innerHTML ve innerText yöntemleridir. Bu yöntemler çok yavaş kalmaktadır daha hızlı yöntem olarak:

Yukarıdaki üç yöntem, bir DOM öğesine, dize biçiminde bir HTML kod yapısına metin eklemek ve DOM öğelerini eklemek için kullanılır, bu üç yöntemin kullanımı temel olarak aynıdır.

insertAdjacentText(position, string);

insertAdjacentHTML(position, htmlstring);

insertAdjacentElement(position, element);

insertAdjacentElement() : Method, belirli bir konuma, belirtilen eleman ekler.

insertAdjacentText() : Method, belirli bir konuma, belirtilen metin düğümü ekler.

insertAdjacentHTML() : Method, belirli bir konumda bir HTML metin ekler.

Sözdizimi :

node.insertAdjacentText(position, text)

node.insertAdjacentElement(position, element)

node.insertAdjacentHTML(position, text)

Position için Parametreler:

Parametrelerin Bulunduğu yerin Gösterilmesi


<!-- beforebegin -->

<p>

<!-- afterbegin -->

Bu bir yazıdır.

<!-- beforeend -->

</p>

<!-- afterend -->

Örnek:beforeBegin yöntemi:

Dıv etiketinden evvel paragraf ekleyelim.

javascript ders

JavaScript:


var test = document.getElementById('test');

test.insertAdjacentHTML('beforeBegin', '

HTML ders

');

ÇIKTI:

Öğenin HTML'si şöyle görünecektir:

<p>HTML ders</p>
<div id="test">
	<p>javascript ders</p>
</div>

Örnek:afterEnd yöntemi:

Dıv etiketinden sonra paragraf ekleyelim.

javascript ders

JavaScript:

var test = document.getElementById('test');

test.insertAdjacentHTML('afterEnd', '

CSS Ders

');

ÇIKTI:

Öğenin HTML'si şöyle görünecektir:


<div id="test">

	<p>javascript ders</p>

</div>

<p>CSS Ders</p>

Örnek:AfterBegin yöntemi:

DIV içerisinde paragraf önüne paragraf ekleyin.

javascript ders

JavaScript:

var test = document.getElementById('test');

test.insertAdjacentHTML('afterBegin', '

Anlatacağımız Ders

');

ÇIKTI:

Öğenin HTML'si şöyle görünecektir:


<div id="test">

	<p>Anlatacağımız Ders</p>

	<p>CSS Ders</p>

</div>

Örnek:BeforeEnd yöntemi:

DIV içerisindeki Paragraf elemanının sonuna yeni bir paragraf ekleyin:

javascript ders

JavaScript:


var test = document.getElementById('test');

test.insertAdjacentHTML('beforeEnd', '

Yeni Konumuz

');

ÇIKTI:

Öğenin HTML'si şöyle görünecektir:

<div id="test">

	<p>javaScript</p>

	<p>Yeni Konumuz</p>
	
</div>

insertAdjacentElement() örnek yapalım:


CSS Ders

javascript ders

JavaScript:

 var test = document.getElementById('test');

 var test1 = document.getElementById('test1');

 test1.insertAdjacentElement('afterend',test);

ÇIKTI:

Öğenin HTML'si şöyle görünecektir:

javascript ders

CSS Ders

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

1581

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.