javascript - 子要素のリストで要素/ノードを置き換える方法は？

Question

<p>内の要素のリストがあり、いずれかのタグがクリックされたときに、を新しい<DIV>ものに置き換えたいと思います。<p><DIV><p>

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

javacsriptでこれを行うにはどうすればよいですか？

Answer 1

このようなもの：

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

HTML：

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

http://jsfiddle.net/dfsq/kcZYW/

Answer 2

replaceChildを試してください

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


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