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.

enru