Adjacent insertion of elements in JavaScript

Given an element:

<div id="elem" style="border: 1px solid red;">
	<p>text</p>
	<p>text</p>
	<p>text</p>
</div>

Insert a paragraph with the text '!!!' before it.

Given an element:

<div id="elem" style="border: 1px solid red;">
	<p>text</p>
	<p>text</p>
	<p>text</p>
</div>

Insert a paragraph with the text '!!!' after it.

Given an element:

<div id="elem" style="border: 1px solid red;">
	<p>text</p>
	<p>text</p>
	<p>text</p>
</div>

Insert a paragraph with the text '!!!' at the beginning of it.

Given an element:

<div id="elem" style="border: 1px solid red;">
	<p>text</p>
	<p>text</p>
	<p>text</p>
</div>

Insert a paragraph with the text '!!!' at the end of it.