Javascript 如何将子元素列表中的元素/节点替换为？

我得到了a中元素的列表，我想在单击任何标记时用一个新的替换

<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>

我怎样才能在JavaCScript中做到这一点？非常感谢您的任何建议

试试看

大概是这样的：

function replaceWithDiv(obj) {
    var div = document.createElement('div');
    div.innerHTML = 'NEW DIV';
    obj.parentNode.insertBefore(div, obj);
    obj.parentNode.removeChild(obj);
}​

HTML:

---

@马哈茂德对不起，伙计，我想要香草JS的，你试过什么了吗？如果是这样，发布代码。如果单击了另一个，你想再次用替换吗？为什么不调用replaceWithDiv并将其作为参数传递？@Ian:为什么不？我更喜欢这是目前的DOM元素。是的，我想没关系，如果你从其他地方调用这个函数，它会变得混乱。它看起来更容易作为参数传递，而不需要使用CaldWror，实际上我会考虑将DOMNElement作为第一个参数来做一个坏的实践。因为它使得使用addEventListener重用同一个函数变得很困难。非常正确：因此，事实上，我认为这个故事的寓意，通常情况下，不是使用内联事件处理程序，而是使用Javascript手动绑定它们

function replaceWithDiv(obj) {
    var div = document.createElement('div');
    div.innerHTML = 'NEW DIV';
    obj.parentNode.insertBefore(div, obj);
    obj.parentNode.removeChild(obj);
}​

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