「JavaScript」insertAdjacentText()メソッドで要素に対する相対的な位置に挿入する

2014年10月4日2020年10月27日

構文
targetElement.insertAdjacentElement(position, element);
insertAdjacentText() メソッドは、与えられたテキストノードを、メソッドを実行した要素に対する相対的な位置に挿入します。
beforebegin
自身の直前に挿入
afterbegin
最初の子ノードとして挿入
beforeend
最後の子ノードとして挿入
afterend
自身の直後にに挿入

htmlコード
<div id="cft">this is a sample</div>
JavaScriptコード
// div要素の取得
var cftCont = document.getElementById( “cft" ) ;

// insertAdjacentTexメソッド
cftCont.insertAdjacentText( “beforebegin", “GOTO" ) ;
cftCont.insertAdjacentText( “afterbegin", “GOTO" ) ;
cftCont.insertAdjacentText( “beforeend", “GOTO" ) ;
cftCont.insertAdjacentText( “afterend", “GOTO" ) ;

結果
GOTO<div id="cft">this is a sample</div>
<div id="cft">GOTOthis is a sample</div>
<div id="cft">this is a sampleGOTO</div>
<div id="cft">this is a sample</div>GOTO