So assuming I had this:
<span id="foo">bar</span>
I want to replace it with this:
bar
In other words, I want to remove the span from the DOM, and insert its contents in its place.
How can I achieve this, using code as minimal as possible? I want to use pure JavaScript, but jQuery's fine as well.
Thanks.
Plain JS using a textNode:
var span = document.getElementById("foo");
span.parentNode.replaceChild(document.createTextNode("bar"), span);
use .unwrap():
$("#foo").contents().unwrap();
Using jQuery you can replace the element with it's contents using replaceWith method and childNode property, this will work in case that your element has more than one descendant Node:
$('#foo').replaceWith(function() {
return this.childNodes;
});
Using pure JavaScript something like the following should work:
var foo = document.getElementById('foo');
while(foo.childNodes.length)
foo.parentNode.insertBefore(foo.childNodes[0], foo);
foo.parentNode.removeChild(foo);
