↑

DOM

：

ドキュメント オブジェクト モデル

：

Element.insertAdjacentElement() メソッド

　編集：2022.09.22 by T.A.

[Edge]。→●、mdn

element の開始タグまたは終了タグの隣に指定のノードを挿入します。

構文
element.insertAdjacentElement(位置,挿入element)
element Element。
位置 element を基準とした挿入位置を文字列で指定。
指定挿入位置
beforeBegin 開始タグの前
afterBegin 開始タグの後
beforeEnd 終了タグの前
afterEnd 終了タグの後

注記： beforebegin および afterend の位置指定で動作するのは、ノードがツリー内にあり、かつ親要素が存在する場合のみとなります。

挿入element Element。
戻り値

挿入された要素、または挿入が失敗した場合は null となります。

例

HTML： 

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

JavaScript： 

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

// 挿入位置および挿入後の構造は、以下のようになります。
// <div id="one">one</div><div id="two">two</div>

HTML： 

<SPAN id=IdTest>[SPAN要素]</SPAN>

JavaScript： 

E=document.createElement("B"); //新しいB要素を生成。
E.innerText="挿入";            //そのテキストを設定。
D=IdTest.insertAdjacentElement("afterBegin", E); //開始タグの後に E を挿入。
DA=IdTest.outerHTML;           //挿入後の結果をHTMLコード文字列で表示。
	//＝[string]：<span id="IdTest"><b>挿入</b>[SPAN要素]</span>

HTML： 

<DIV id=IdSoto>[DIV要素
<SPAN id=IdTest>[SPAN要素]</SPAN>
]
</DIV>

JavaScript： 

E=document.createElement("B"); //新しいB要素を生成。
E.innerText="挿入";            //そのテキストを設定。
D=IdTest.insertAdjacentElement("beforeBegin", E); //開始タグの前に E を挿入。
DA=IdSoto.innerHTML;           //挿入後の結果をHTMLコード文字列で表示。
	//＝[string]：[DIV要素 <b>挿入</b><span id="IdTest">[SPAN要素]</span> ]
関連

insertAdjacentHTML()、insertAdjacentText()。append()。

テスト
HTML：


ここにHTMLが表示される
⯈スクリプト組み込み：
JavaScript：


JavaScript：



表示内容：
表示内容：