Replace parent element with its contents

Question

I'm trying to do something similar/same as in this question: How to remove only the parent element and not its child elements in JavaScript?

<div>
    This is some text here
    <h2>This is more text</h2>
</div>

All I want is to remove the H2 tag. The result should be:

<div>
    This is some text here
    This is more text
</div>

Assume that I have the H2 element already:

if (parentElement.nodeName.toLowerCase() == "h2") {
    //now what? I basically want to this: $.replaceWith(parentElement.innerText)
    //just without jQuery
}

Answer 1

Use modern JS!

const h2 = document.querySelector('h2');
h2.replaceWith(h2.firstChild);

To instead replace with all children, use:

h2.replaceWith(...h2.childNodes); // or h2.children, if you don't want textNodes

developer.mozilla.org

Can I Use - 94% Apr 2020