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:

• insertAdjacentText
• insertAdjacentHTML
• insertAdjacentElement

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 :

Position için Parametreler:

• 'beforebegin': Elementin Kendisinden önce.
• 'afterbegin': Elemanın başlangıcından sonra (ilk çocuk olarak)
• 'beforeend': Elemanın bitiminden önce (son çocuk olarak)
• 'afterend':Elemandan sonra

Parametrelerin Bulunduğu yerin Gösterilmesi

Örnek:beforeBegin yöntemi:

Dıv etiketinden evvel paragraf ekleyelim.

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

JavaScript:

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

test.insertAdjacentHTML('beforeBegin', '<p>HTML ders</p>');

Ç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.

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

JavaScript:

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

test.insertAdjacentHTML('afterEnd', '<p>CSS Ders</p>');

Ç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.

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

JavaScript:

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

test.insertAdjacentHTML('afterBegin', '<p>Anlatacağımız Ders</p>');

Ç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:

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

JavaScript:

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

test.insertAdjacentHTML('beforeEnd', '<p>Yeni Konumuz</p>');

ÇIKTI:

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

<div id="test">

    <p>javaScript</p>

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

insertAdjacentElement() örnek yapalım:

<p id="test" style="color:red">
CSS Ders
</p>  

<p id="test1">
    javascript ders
</p>

JavaScript:

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

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

 test1.insertAdjacentElement('afterend',test);

ÇIKTI:

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

<p id="test1">
    javascript ders
</p>

<p id="test" style="color:red">
CSS Ders
</p>