[Javascript]任意の場所に要素を追加する方法

JavaScriptで任意の場所に要素を追加する方法について記述します。
要素(element)の前後に新たに要素を追加したいと思う場面はあるかと思います。
JavaScriptで要素に変更を加える場合、innerHTMLでも変更することは可能ですが
既存の要素に影響がでる可能性があります。

element.insertAdjacentHTMLを利用することで、
innerHTMLよりも安全に要素を追加することが可能です。

ソースコード

<button onClick="beforebegin()" class="red" id="bb">①element外(前)</button>
<button onClick="afterbegin()" class="blue" id="ab">②element内(前)</button>
<button onClick="beforeend()" class="green" id="be">③element内(後)</button>
<button onClick="afterend()" class="yellow" id="ae">④element外(後)</button>
<p>
    <!-- ①element外(前) -->
    <span id="main">
        <!-- ②element内(前) -->
        本文
        <!-- ③element内(後) -->
    </span>
    <!-- ④element外(後) -->
</p>

.red { background-color:rgba(255,0,0,0.3); }
.blue { background-color:rgba(0,0,255,0.3); }
.green { background-color:rgba(0,128,0,0.3); }
.yellow { background-color:rgba(255,255,0,0.3); }

// 対象要素
var main = document.getElementById('main');
// ①element外(前)用
function beforebegin(){
    main.insertAdjacentHTML('beforebegin', '<span class="red">タブ外先頭</span><br>');
}
// ②element内(前)用
function afterbegin(){
    main.insertAdjacentHTML('afterbegin', '<span class="blue">タブ内先頭</span><br>');
}
// ③element内(後)用
function beforeend(){
    main.insertAdjacentHTML('beforeend', '<br><span class="green">タブ内末尾</span>');
}
// ④element外(後)用
function afterend(){
    main.insertAdjacentHTML('afterend', '<br><span class="yellow">タブ外末尾</span>');
}