Смежная вставка элементов на JavaScript

Дан элемент:

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

Вставьте перед ним абзац с текстом '!!!'.

Дан элемент:

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

Вставьте после него абзац с текстом '!!!'.

Дан элемент:

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

Вставьте ему в начало абзац с текстом '!!!'.

Дан элемент:

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

Вставьте ему в конец абзац с текстом '!!!'.