Insert elements before JavaScript elements

Given the element #elem:

<ul id="parent">
	<li>text</li>
	<li>text</li>
	<li id="elem">text</li>
	<li>text</li>
	<li>text</li>
</ul>

Insert an element before this element with the text 'new'.

Modify the previous task so that clicking on the inserted element causes '!' to be added to the end of its text.