Различия ключей beforeBegin, afterBegin, beforeEnd, afterEnd

Для вставки в тексты щелкните по ним мышкой.

Tекст1

Текст2

Текст3

Текст4

Исходный код этого примера:

<p>Для вставки в тексты щелкните по ним мышкой.</p>
<h2 onmousedown="insertAdjacentHTML('beforeBegin','Вставка(<i>beforeBegin</i>) ')">Tекст1</h2>
<h2 onmousedown="insertAdjacentHTML('afterBegin','Вставка (<i>afterBegin</i>)') ">Текст2</h2>
<h2 onmousedown="insertAdjacentHTML('beforeEnd','Вставка(<i>beforeEnd</i>)') ">Текст3</h2>
<h2 onmousedown="insertAdjacentHTML('afterEnd','Вставка(<i>afterEnd</i>)') ">Текст4</h2>