如何使用JavaScript / jQuery用文本替换元素？

Question

所以假设我有这个：

<span id="foo">bar</span>

我想用它替换它：

bar

换句话说，我想从DOM中删除span，并将其内容插入到位。

如何使用尽可能少的代码实现这一目标？我想使用纯JavaScript，但jQuery也很好。

感谢。

Answer 1

使用textNode的简单JS：

var span = document.getElementById("foo");
span.parentNode.replaceChild(document.createTextNode("bar"), span);

Answer 2

.replaceWith ...

$( "#foo" ).replaceWith( "bar" );

jQuery：Documentation»

Answer 3

使用.unwrap()：

$("#foo").contents().unwrap();

Answer 4

使用jQuery，你可以使用replaceWith方法和childNode属性用它的内容替换元素，这将适用于你的元素有多个子节点的情况：

$('#foo').replaceWith(function() {
   return this.childNodes;
});

使用类似以下内容的纯JavaScript应该有效：

var foo = document.getElementById('foo');

while(foo.childNodes.length)
   foo.parentNode.insertBefore(foo.childNodes[0], foo);

foo.parentNode.removeChild(foo);

http://jsfiddle.net/mM54V/