HTML要素の追加方法いろいろ 挿入位置で分類

要素の追加方法がいろいろあるのでメモ。
<div id="test">test</div>に対してどこに挿入するかで分けました。

開始タグの前に挿入

insertAdjacentHTML ("beforebegin")

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

test.insertAdjacentHTML('beforebegin','<div>BeforeBegin</div>');

insertBefore

var element = document.createElement('div');
element.innerHTML = "BeforeBegin";

document.body.insertBefore(element, test);

jQueryのbefore または insertBefore

$('#test').before('<div>BeforeBegin</div>');
//または
$('<div>BeforeBegin</div>').insertBefore('#test');

結果

<div>BeforeBegin</div>
<div id="test">
 test
</div>

開始タグの後に挿入

insertAdjacentHTML ("afterbegin")

test.insertAdjacentHTML('afterbegin','<div>AfterBegin</div>');

jQueryのprepend または prependTo

$('#test').prepend('<div>AfterBegin</div>');
// または
$('<div>AfterBegin</div>').prependTo('#test');

###　結果

<div id="test">
 <div>AfterBegin</div>
 test
</div>

終了タグの前に挿入

insertAdjacentHTML ("beforeend")

test.insertAdjacentHTML('beforeend', '<div>BeforeEnd</div>');

jQueryのappend または appendTo

$('#test').append('<div>BeforeEnd</div>');
// または
$('<div>BeforeEnd</div>').appendTo('#test');

結果

<div id="test">
 test
 <div>BeforeEnd</div>
</div>

終了タグの後に挿入

insertAdjacentHTML ("afterend")

test.insertAdjacentHTML('afterend','<div>AfterEnd</div>');

jQueryのafterまたはinsertAfter

$('#test').after('<div>AfterEnd</div>');
//または
$('<div>AfterEnd</div>').insertAfter('#test');

結果

<div id="test">
  test
</div>
<div>AfterEnd</div>