Question

I have got a list of <p> elements within a <DIV> and i would like to replace the <p> with a new <DIV> when any of the <p> tags are clicked.

<div class="list">
 <p onClick="replaceWithDiv">para one</p>
 <p onClick="replaceWithDiv">para two</p>
 <p onClick="replaceWithDiv">para three</p>
</div>

when the second <p> is clicked I want it to change to

<div class="list">
 <p onClick="replaceWithDiv">para one</p>
 <div>NEW DIV</div>
 <p onClick="replaceWithDiv">para three</p>
</div>

How can I do this in javacsript?Any advice much appreciated

Answer 1

Try replaceChild

function replaceWithDiv() 
    var div = document.createElement("DIV");
    //...
    this.parentNode.replaceChild(div, this);
}


<p onclick="replaceWithDiv.call(this)">para one</p>