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

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

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

重新组合未包装的文本节点的一种巧妙方法是使用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;
    });
}