Question

如何删除javascript html标记（例如span）但不删除内容中的内容和html标记？一个例子：

<div id="content">
    <span id=1 class="note" >
        <p>   <span id=1 class="note" >hello! its one example  </span> </p>
        <li>  <span id=1 class="note" >yes,one example  </span> </li>
    </span> 
</div>

结果应该是：

<div id="content">
    <p> hello! its one example</p><li>yes,one example</li>
</div>

Answer 1

在您的特定示例中，最好只覆盖即时 parentNode 。

var content  = document.getElementById('content'),
    span     = content.getElementsByTagName('span')[0],
    p        = content.getElementsByTagName('p')[0];

content.innerHTML = span.innerHTML;

Answer 2

由于您没有提到需要JQuery，以下是我建议的代码：

http://jsfiddle.net/9qgK7/

相关代码：

span.outerHTML = span.innerHTML;

参考：https://developer.mozilla.org/en-US/docs/DOM/element.outerHTML
PS：自v11以来，Firefox仅开始支持outerHTML，但我们已经在使用v15：）

Answer 3

如果你可以使用jQuery，试试这样的东西

var newContent = $("#content span").html();
$("#content").html(newContent);

修改

纯JS解决方案

var spans = document.getElementById("content").getElementsByClassName("note"); var out = ""; for (var i = spans.length - 1; i >= 0; i--) { out += spans[i].innerHTML; } document.getElementById("content").innerHTML = out;

jsFiddle Example

Answer 4

可以使用Jquery轻松完成：

$('span.note').each(function(){
    $(this).replaceWith($(this).html());
});

HTML如何删除标签但不包含内容

4 个答案: