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

Question

我正在尝试做一个innerWrap，然后操作wrap的内容。然而，包装似乎从来没有添加它的 child !这是一个显示问题的测试:

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));