javascript - 如何在子元素列表中替换元素/节点？

Question

我在 a 中有一个<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

尝试替换子

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


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