javascript - 用其内容替换父元素

Question

我正在尝试做与此问题类似/相同的事情： 如何在 JavaScript 中仅删除父元素而不是其子元素？

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

我想要的只是删除 H2 标签。结果应该是：

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

假设我已经有了 H2 元素：

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

Answer 1

使用现代 JS！

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

要替换为所有孩子，请使用：

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

developer.mozilla.org

我可以使用- 94% 2020 年 4 月

Answer 2

假设变量h2准确地引用了h2您想要操作的元素，我的第一个想法是：

var h2 = document.getElementsByTagName('h2')[0],
    textnode = h2.firstChild;

h2.parentNode.insertBefore(textnode,h2.nextSibling);
h2.parentNode.removeChild(h2);​

JS 小提琴演示。

为了使它稍微干燥一点，函数方法可以是：

function unwrapH2(el) {
    if (!el) {
        return false;
    }
    else {
        var textnode = el.firstChild,
            elParent = el.parentNode;

        elParent.insertBefore(textnode, h2.nextSibling);
        elParent.removeChild(h2);
    }
}

var h2 = document.getElementsByTagName('h2')[0];

unwrapH2(h2);

JS 小提琴演示。

根据 Felix Kling 的评论（如下）调整了上述内容，并使用replaceChild()：

function unwrapH2(el) {
    if (!el) {
        return false;
    }
    else {
        var textnode = el.firstChild,
            elParent = el.parentNode;
        elParent.replaceChild(textnode,el);
    }
}

var h2 = document.getElementsByTagName('h2')[0];

unwrapH2(h2);

JS 小提琴演示。

Answer 3

首先，开始使用 jQuery。它使您的生活更轻松。

在 jQuery 中，执行以下操作：

var h2html = $('div h2').html();
$('div h2').remove();
$('div').append(h2html);

---

编辑：

以上仅适用于 1div和 1h2元素，这是 div 中的最后一个元素。这只是一个简单的例子。下面是让你的生活更轻松的代码：

$('div h2').each(function (x, y) {
    $(this).replaceWith($(this).html());
});​