wrapInner不会将子项添加到DOM中的包装元素

Question

我正在尝试做一个innerWrap，然后操作wrap的内容。然而，包装似乎永远不会让它的孩子加入！这是一个测试，显示了这个问题：

var images    = $(element).find('img');
console.log(images);
var wrap      = document.createElement("div")
$(element).wrapInner(wrap)
var images2   = $(wrap).find('img');
console.log(images2);

View as JSFiddle

有什么想法吗？

Answer 1

显然，当你将一个元素传递给.wrapInner()函数时，该元素的结构相同的副本，而不是元素本身被包裹在内容中。在您的示例中，您将注意到以下内容：

• #element最终会有一个符合预期的子项：包含三个图像的div
• 但wrap.parentNode为null，表示它存在于内存中，未附加到DOM
• wrap === $("#element").children().get(0)返回false确认假设

解决方案：修改你的代码：

var $images1 = $("#element").find('img');
$("#element").wrapInner("<div></div>");
var $images2 = $("#element").children().find("img");
// the div can be accessed by doing $("#element").children()
console.log($images1.length, $images2.length, $images1.get(0) === $images2.get(0));