How to replace an element/node with in a list of child elements?
<p>I have got a list of <code>&lt;p&gt;</code> elements within a <code>&lt;DIV&gt;</code> and i would like to replace the <code>&lt;p&gt;</code> with a new <code>&lt;DIV&gt;</code> when any of the <code>&lt;p&gt;</code> tags are clicked. </p>

<pre><code>&lt;div class="list"&gt;
 &lt;p onClick="replaceWithDiv"&gt;para one&lt;/p&gt;
 &lt;p onClick="replaceWithDiv"&gt;para two&lt;/p&gt;
 &lt;p onClick="replaceWithDiv"&gt;para three&lt;/p&gt;
&lt;/div&gt;

when the second &lt;p&gt; is clicked I want it to change to

&lt;div class="list"&gt;
 &lt;p onClick="replaceWithDiv"&gt;para one&lt;/p&gt;
 &lt;div&gt;NEW DIV&lt;/div&gt;
 &lt;p onClick="replaceWithDiv"&gt;para three&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>How can I do this in javacsript?Any advice much appreciated</p>
