如何追加或插入元素作为元素的包装器/容器

Question

dom中有两个

，我想使用JavaScript/jQuery将这两个
包装到一个包装器div中。

有没有办法这样做？

原来的节点是这样的：

<ul id="item-list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
<ul id="product-list">
    <li>Product 1</li>
    <li>Product 2</li>
    <li>Product 3</li>
</ul>

我想在那些ul周围添加包装器div，它应该如下所示：

<div id="container">
    <ul id="item-list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <ul id="product-list">
        <li>Product 1</li>
        <li>Product 2</li>
        <li>Product 3</li>
    </ul>
</div>

上面的插入应该仅来自javascript或jquery。

先谢谢你。

Answer 1

您可以尝试使用.wrapall()，如下所示：

null

$('#item-list, #product-list').wrapAll( "<div id='container'></div>" );

#container{
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="item-list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
<ul id="product-list">
    <li>Product 1</li>
    <li>Product 2</li>
    <li>Product 3</li>
</ul>