[JavaScript] insetAdjacentHTML()

InsertAdjacentHTML()メソッドは、HTMLやXMLなどの特定のテキストをグループ化し、DOMツリーに必要なノードを特定の場所に追加します.すでに使用されている要素はグループ化されません.したがって、エレメントに存在するエレメントには触れません.(innerHtmlとは異なる).仕事はinnerHtmlより速い.

語句

element.insertAdjacentHTML(position, text);

text(パラメータ)は、HTMLまたはXMLと解釈できる文字列であり、(html code)、DOM Treeに挿入することができる.

使用可能な範囲

positionは次の単語しか使用できません.

beforecoregin:elementの前の

afterbegin:要素の最初のchild

beforend:elementで最後のchild

afterend:elementの後の

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

EXAMPLE

// <div id="one">one</div>

let 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>

aftendとしてpositionを使用しているのでelementの後ろにあります.

REFERENCE

https://developer.mozilla.org/ko/docs/Web/API/Element/insertAdjacentHTML