Question

我有以下HTML代码：

<p> hello every body, to day is a sunny day</p>

我使用wrap()方法用<em>标记包装元素，如下所示：

<p> hello every body, to day is <em>a sunny day<em></p>

完成测试后，我使用$("em").contents().unwrap()打开所有<em>标记：

I make a loop for all elements in my page
So I found that
-----hello every body, to day is a----
and 
-----a sunny day-----

are 2 seperated text nodes,

如何使用wrap()和unwrap()，这样我的文字就不会像那样被分割？

Answer 1

我害怕，你不能使用.wrap（）和.unwrap（）去做我认为你打算做的事情。 .unwrap（）在jQuery代码中调用replaceWith（），最终调用.replaceChild()。 JS中的replaceChild（）方法将一个DOM子节点替换为另一个DOM子节点。 .contents（）的使用正在创建text node。

这会更新浏览器中的渲染树，从而更新您在开发人员工具中看到的标记。渲染树中的节点放在它们自己的标记行上...不要与实际最终显示的内容混淆：因为\ n是空白字符，文本节点将在屏幕上的一行中显示。

如果您需要将实际文本（innerHTML）分解为textNodes，则必须采取一些措施：

    $(document).ready(function () {
        var _childContent = $('em').contents()[0].data,
            _childIndex = $('p')[0].innerHTML.indexOf('<em>'),
            _parentText;

        $('em').remove();
        _parentText = $('p')[0].innerHTML;
        $('p')[0].innerHTML = _parentText.substr(0, _childIndex) + 
                              _childContent +
                              _parentText.substr(_childIndex + 1, _parentText.length);
    });

由于必须采取这些措施，我同意grmmph关于它是否是样式问题的评论，然后采用addClass（）方法。

但是，如果你想要的是让<p>和</p>标签之间的所有文字出现在一行而不是被视为textNodes，那么上述工作（至少在IE 10中）在开发人员工具中查看时。）

Answer 2

这个问题可以追溯到一段时间，所以我的答案可能只适用于将来面临与OP类似问题的人（就像我自己一样）。

重新组合展开的文本节点的一种巧妙方法是使用innerHtml

重置span的父元素的$.html()

HTML

<p>Lorem ipsum <span>dolor sit</span> amet.</p>

JS

function reset () {
    var parent = $('span').parent();
    $('span').contents().unwrap();
    parent.html(function(i, html) {
       return html;
    });
}

Answer 3

很久以前就已经问过这个问题，但是由于尚未标记答案，因此我将发布答案。我不确定您是否希望拆分这些文本节点，但是可以通过以下两种方式完成这些操作（运行摘录以查看其工作原理）：

原始的Javascript方式（发现here）：

function unwrapElement () {
  var el = document.querySelector('em')
  var parent = el.parentNode
  while (el.firstChild) parent.insertBefore(el.firstChild, el)
  parent.removeChild(el)
}

<p>Hello every body, to day is <em>a sunny day<em></p>
<button onclick="unwrapElement()">Do unwrap</button>

JQuery方式（类似于@StevieP的方式）：

function unwrapElement() {
  $('em').contents().unwrap()
  $('em').parent().html((i, html) => html) // if you remove this, then the text will be split
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Hello every body, to day is <em>a sunny day<em></p>
<button onclick="unwrapElement()">Do unwrap</button>

在换行和解包jquery之后合并文本节点

3 个答案: