如何在新div中包装每三个唯一的子元素

在新div中包装每三个唯一的子元素，可以通过以下步骤实现：

首先，获取所有的子元素。
创建一个新的div元素，作为包装容器。
遍历子元素列表，对于每三个唯一的子元素，执行以下操作： a. 创建一个新的div元素，作为每组三个子元素的包装容器。 b. 将这三个子元素添加到新创建的div元素中。 c. 将新创建的div元素添加到主包装容器中。
如果子元素的数量不是3的倍数，剩余的子元素可以单独创建一个div元素进行包装，并添加到主包装容器中。
最后，将主包装容器添加到文档中的适当位置。

以下是一个示例代码，演示如何实现上述步骤：

<!DOCTYPE html>
<html>
<head>
  <title>Div包装子元素示例</title>
  <style>
    .wrapper {
      display: flex;
      flex-wrap: wrap;
    }
    .group {
      width: 33.33%;
      box-sizing: border-box;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div id="container">
    <div>子元素1</div>
    <div>子元素2</div>
    <div>子元素3</div>
    <div>子元素4</div>
    <div>子元素5</div>
    <div>子元素6</div>
    <div>子元素7</div>
    <div>子元素8</div>
    <div>子元素9</div>
    <div>子元素10</div>
  </div>

  <script>
    // 获取子元素列表
    var container = document.getElementById('container');
    var children = container.children;

    // 创建主包装容器
    var wrapper = document.createElement('div');
    wrapper.classList.add('wrapper');

    // 遍历子元素列表
    for (var i = 0; i < children.length; i += 3) {
      // 创建每组三个子元素的包装容器
      var group = document.createElement('div');
      group.classList.add('group');

      // 添加三个子元素到包装容器中
      for (var j = i; j < i + 3; j++) {
        if (children[j]) {
          group.appendChild(children[j].cloneNode(true));
        }
      }

      // 将包装容器添加到主包装容器中
      wrapper.appendChild(group);
    }

    // 如果子元素的数量不是3的倍数，单独包装剩余的子元素
    if (children.length % 3 !== 0) {
      var remainingGroup = document.createElement('div');
      remainingGroup.classList.add('group');

      for (var k = children.length - (children.length % 3); k < children.length; k++) {
        remainingGroup.appendChild(children[k].cloneNode(true));
      }

      wrapper.appendChild(remainingGroup);
    }

    // 将主包装容器添加到文档中的适当位置
    container.parentNode.insertBefore(wrapper, container.nextSibling);
  </script>
</body>
</html>

在上述示例代码中，我们使用了Flex布局来实现子元素的自动换行，并通过CSS样式定义了包装容器的样式。你可以根据需要自定义样式。

请注意，这只是一个示例实现，你可以根据具体需求进行修改和优化。