Question

如何在不删除父元素的情况下展开元素？

例如，如果我有以下

<strong>Some text <span>and some more text.</span> And a little more.</strong>

是否有javascript或jquery方法来解开span，导致

<strong>Some text </strong><span>and some more text</span><strong>And a little more.</strong>

我可以使用jquery的unwrap来简单地从span中删除强标记，但这会导致跨度之外的文本也丢失标记。

Answer 1

这是一种方法：

$("strong").contents().filter(function () {
    return (this.nodeType==3)
}).wrap('<strong/>').parent().unwrap();

<强> jsFiddle example

这导致：

<strong>Some text </strong><span>and some more text.</span><strong> And a little more.</strong>

Answer 2

根据要求，这是我谈论的方法。为了简单起见，我使用了jQuery并将其分解为多于必要的行，但如果您愿意，可以压缩/使用内置的JS函数。在这里玩吧：https://jsfiddle.net/vmge8a7j/

var strongElem = $("strong");
var spanElem   = $("span");

$("span").remove();

$("#parent").append(spanElem);

Answer 3

var span = $("strong span").detach();
var strong = $("strong").contents().wrap("<strong/>").end().append(span).contents().unwrap();

＆＃13;

var span = $("strong span").detach();
var strong = $("strong").contents().wrap("<strong/>").end().append(span).contents().unwrap();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<strong>hello all<span>hello</span> this text has no span </strong>

＆＃13;

Javascript展开元素的一部分？

3 个答案: