Skip to content

insertAdjacentHTML

insertAdjacentHTML

Element arabiriminin insertAdjacentHTML() method’u, belirtilen metni ( text ) HTML veya XML olarak parse eder ve sonuçlanan düğümleri belirtilen bir konumdaki ( position ) DOM ağacına ekler. Kullanıldığı elemanı yeniden parse etmez ve bu nedenle o elemanın içindeki mevcut elemanları bozmaz. Bu, serileştirmenin fazladan adımını önler, doğrudan innerHTML manipülasyonundan çok daha hızlı hale getirir.

Sözdizimi ( Syntax )

element.insertAdjacentHTML(position, text);

Parametreler

  • position: Element‘e göre konumu temsil eden bir DOMString olmalıdır; seçenekler aşağıya yazılmıştır.
  • beforebegin: Element‘in kendisinden önce.
  • afterbegin: Element‘in hemen içinde, ilk çocuğundan önce.
  • beforeend: Element‘in hemen içinde, son çocuğundan sonra.
  • afterend: Element‘in kendisinden sonra.
  • text: HTML veya XML olarak parse edilecek ve ağaca eklenecek string.

Konum Adların Görselleştirelim

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

Örnek

// <div id="one">one</div>
var d1 = document.getElementById("one");
d1.insertAdjacentHTML("afterend", '<div id="two">two</div>');

// At this point, the new structure is:
// <div id="one">one</div><div id="two">two</div>
Kaynak

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML


Last update: June 15, 2022
Created: June 15, 2022