javascript - 用给定节点包裹单个节点

Question

我有一个picture指向 <img> 的变量我的文档树中的元素。我想用 <span> 来包装标签。当我使用普通 DOM 函数执行此操作时，一切都会按预期工作:

var container = document.createElement("span");
container.style.border = "1em solid red";
container.innerHTML = "Container";
picture.parentNode.appendChild(container);
container.appendChild(picture);
container.style.borderColor = "green"; // Result: green on screen

更具体地说，container指向唯一的<span> 。但是当我用 jQuery wrap() method 这样做时:

var container = $("<span></span>")
    .css({border: "1em solid red"})
    .text("Container");
container.css({borderColor: "yellow"}); // Result: yellow on screen
$(picture).wrap(container);
container.css({borderColor: "green"});

...查询克隆我的节点并将图片包裹在克隆周围，因此 container指向从未使用过且与文档保持分离的节点。我知道发生这种情况是因为 wrap() jQuery 链中的每个匹配元素都需要一个包装器对象(克隆完全有意义)。

有没有一种优雅的 jQuerish 方式来包装单个 <img>具有给定 <span> 的标签并保留对此类 <span> 的引用进一步使用？

Answer 1

这应该可以做到:

var picWrapper = $(picture).wrap(container).parent();

将其包装在 span 中后，span 元素将成为它的新父元素。