Question

当我尝试使用.after构建一系列断开连接的DOM节点时，如果它们为空则可以正常工作：

[14:56:45.186] $('<span></span>').after('<p></p>');
[14:56:45.193] ({0:({}), length:2, prevObject:{0:({}), length:1}, context:(void 0), selector:".after([object Arguments])", 1:({})})

但是如果我尝试在第一个节点中添加任何文本，它就会失败：

[14:56:41.521] $('<span>test</span>').after('<p></p>');
[14:56:41.525] ({0:({}), length:1})

如果我将该结果分配给变量并尝试检查它，则看起来好像从未调用after。

这里发生了什么，我该如何解决它？

编辑：对于那些感兴趣的人，我最后写了下面的包装纸，似乎让我的生活更轻松：

function tag(name) {
    return function(contents, options) {
        var o = options || {};
        var is_array = $.type(contents) === "array";
        if (!is_array) {
            o.text = contents;
        }
        result = $('<' + name + ' />', o);
        if (is_array) {
            $.each(contents, function(i, child) { result.append(child); });
        }
        return result;
    }
}
var span = tag('span');
var div = tag('div');

Answer 1

澄清您的错误 - 当我在JavaScript控制台中运行您的代码时，我得到以下内容：

> $('<span></span>').after('<p></p>');
[<span></span>,<p></p>]
> $('<span>test</span>').after('<p></p>');
[<span>test</span>]

根据the jQuery 1.9 upgrade guide：

在1.9之前，。after（）,. before（）和.replaceWith（）会尝试如果第一个节点在当前jQuery集中添加或更改节点 set没有连接到文档，在这些情况下返回一个新文档 jQuery设置而不是原始设置。 这创造了几个不一致和彻头彻尾的错误 - 方法可能会也可能不会根据其参数返回一个新结果！ 从1.9开始，这些方法总是返回原始的未修改集并尝试在没有父节点的节点上使用.after（）,. before（）或.replaceWith（）没有效果 - 也就是说，它所包含的集合或节点都不是改变。

所以：您观察到的行为是在没有父节点的节点上使用.after()导致的错误。从1.9开始，jQuery开发团队通过完全删除它来解决这种不一致问题 - 使用.after()这种方式应始终返回初始节点，而不是之后的$chain = $('<div>').append('').append('qwer').children();。

解决方法：

将DOM节点推送到一个简单的数组上。或者将它们附加到父节点，然后获取所有子节点：（fiddle）

{{1}}

Answer 2

创建新节点通常是这样做的：

$('<span />', {text: 'test'}).after($('<p />'));

如何连接非空的断开连接的节点？

2 个答案: