jquery - 如何解决 jQuery 1.9 中断开节点的新 .after、.before 行为

Question

我习惯于在 jQuery 1.8+ 中使用 .before、.after 或 .replaceWith 处理与 DOM 断开连接的模板化内容。在 1.9 中，我们似乎完全失去了使用这些方法操作断开节点的能力，因为它们总是返回未修改的原始集。

例如：

// prepare some disconnected content, e.g. compiling templates
var $node = $('<div>before</div>');
// later do some calculations and have a need to splice some disconnected content together
var $after = $('<div class="green">after</div>');
$node.after($after)
// Add to the DOM
$('.result').append($node);

以下是演示如何打破的小提琴：

• 1.8.3（预期行为）：http: //jsfiddle.net/octatone/zgynM/
• 1.9（不再有效）：http: //jsfiddle.net/octatone/hTp27/

我对 jQuery 删除这种行为以保持一致性很好，但必须有一个解决方法。我不想也不应该将断开连接的节点连接到 dom 以便以这种方式操作它们。

我们如何解决 jQuery 1.9 中新的 .after、.before 和 .replaceWith 行为？

Answer 1

与其尝试附加到不存在的 DOM，不如添加到 jQuery 选择器（即.add改为使用）。这似乎有效：

http://jsfiddle.net/hTp27/3

Answer 2

只需附加到节点：

// prepare some disconnected content, e.g. compiling templates
var $node = $('<div>before</div>');
// later do some calculations and have a need to splice some disconnected content together
var $after = $('<div class="green">after</div>');
$node.append($after)

// Add to the DOM
$('.result').append($node);