将一个元素包裹在另一个元素周围

是否有一种简单的方法来包装元素，就像在jQuery（.wrap（））中一样。

示例：

在jQuery中：

$('.inner').wrap('<div />');

我在达特寻找什么：

query('.inner').wrap(new DivElement());

HTML可能看起来像

<html>
    <head>
    </head>
    <body>
        <div class="inner"> Some text </div>
    </body>
</html>

结果是

<html>
    <head>
    </head>
    <body>
        <div>
            <div class="inner"> Some text </div>
        </div>
    </body>
</html>

这里有一个wrap()函数的简单实现，可以满足您的需求：

<!DOCTYPE html>
<html>
  <body>
    <p class='first'></p>
    <script type="application/dart">
      import 'dart:html';
      wrap(Element element, Element wrapper) {
        var clone = element.clone(true);
        element.replaceWith(wrapper);
        wrapper.children.add(clone);
      }
      void main() {
        wrap(query('p.first'), new DivElement());
      }
    </script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

调用wrap()后，DOM如下所示：

<div>
  <p class='first'></p>
</div>

不过，有一件事（至少）需要注意：克隆节点不会复制使用listen()（例如，elem.onClick.listen）添加的事件侦听器或直接分配给元素属性的侦听器。这不是我在这里使用的简单示例的问题，但在某些情况下可能是个问题。

根据Alexandre的评论，这里有另一种包装元素的方法。这个不克隆元素：

wrap2(Element element, Element wrapper) {
  element.parent.insertBefore(wrapper, element);
  wrapper.children.add(element);
}

我不知道这两种解决方案是否适用于所有情况，但它们适用于这里的示例。

相关内容

最新更新

热门标签：