【问题标题】：How to add two existing elements inside a div?如何在 div 中添加两个现有元素？
【发布时间】：2018-05-13 05:53:01
【问题描述】：

从库中创建了两个元素，例如：

<div class='element1'></div>
<div class='element2'></div>

我想将这些添加到 div 内的元素中：

<div class='container'>
    <div class='element1'></div>    
    <div class='element2'></div>
</div>

我试过了：

$('.container').html($('.element1'));

但它只适用于 1 个元素。

如何将这两个div添加到类container的div中？

【问题讨论】：

How to select multiple elements with jQuery的可能重复
副本详细说明了如何使用单个选择器选择多个元素。
@Taplar，是的，它有效，谢谢
有一天可能会有用。这是纯 Javascript，但它需要元素和其中存在的任何东西，复制它们，创建一个具有 container 类的新 div，然后将它们与它们的内容一起粘贴到 <div class='container'></div> 中。在脚本结束时，它会删除原始 div。 jsfiddle.net/uuz1dt2L

标签： jquery html

【解决方案1】：

问题

<div class='element1'></div>
<div class='element2'></div>

“如何将这两个div添加到带有类容器的div中？”

解决方案

将收集.element1 和.element2 类的任何实例的jQuery 选择器是：

$(".element1, .element2")

语法快速分解：

$(        // Begin jQuery Object
"         // Begin Selector ?
.         // Begin ClassName
element1  // Full ClassName
,         // AND
.         // Begin ClassName
element2  // Full ClassName
"         // end Selector
)         // end jQuery Object

最后，我们需要在div.container中插入这个jQuery Collection：

<!--//B00~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
   /* B00 EXAMPLE */
   $(".container").append($(".element1, .element2"));

在 JavaScript 中，有很多方法可以在其他元素中插入元素，而 jQuery 也拥有自己的所有 JavaScript 功能。前面的Example B00（位于上方）使用最常用的 jQuery 方法进行 DOM 操作：append()。

7 个例子

前 3 个示例：C01、C23 和 C45

前两个示例都提供了一个替代的 jQuery 方法完成相同的目标。请参阅 C01 prependTo() 和 C23 wrapInner()。
第三个示例更符合您规划编码的需要。我很清楚用户由于以下原因而无法更改其代码诸如限制性（更像是受限）CMS 的情况，或您的雇主禁止任何人更改的礼仪代码。更经常不是，可能是用户不习惯使用脚本或者用户有足够的知识来假设一些建议的解决方案不会起作用，因为它没有按照用户认为的那样做需要（即使解决方案实际上解决了问题。）不是说你是后一种用户，但我闻到了XY Problem。因此，第三个示例 C45 涉及添加一个 通用 Class 到 .E4（在 OP 代码中为 .element1）和 .E5 （.element2在操作码中）：
```
 /* EXAMPLE C45 /
// Here 2 divs with similar classes get a *common class* to hook into.
|| The common class in this Example is `.E` in OP code it could be 
|| `.elements`. By implementing common classes, we could group elements 
|| semantically, logically, alphabetically, categorically, anything is
|| better than dealing with a thousand unique variations of a class and 
|| having to sort them out all the time.
*/
/* 
$('.E4, .E5').addClass('E');  // After this statement, we have a hook
$('.E').appendTo($('.C45'));  // Objective is accomplished  
```

这是一个额外的步骤，如果您无法在 HTML 或 CSS 中硬编码任何内容，则应在加载期间执行此步骤。快速比较：

操作码

   <div class='element1'>Element</div> 
   <div class='element2'>Element</div>
   <div class='element3'>Element</div>
   <div class='element4'>Element</div>
   <div class='element5'>Element</div>
   <div class='element6'>Element</div>
   <div class='element7'>Element</div>
   <div class='element8'>Element</div>
   <div class='element9'>Element</div>

每个元素都有一个唯一标识符：.element${1,2,3,...6}。

必须完全依赖一些数据来确定要抓取哪些元素...

新代码

   <div class='element1 element nested'>Element</div> 
   <div class='element2 element nested'>Element</div>
   <div class='element3 element solo'>Element</div>
   <div class='element4 element solo'>Element</div>
   <div class='element5 element test'>Element</div>
   <div class='element6 element data' data-stat='3'>Element</div>
   <div class='element7 element'>Element</div>
   <div class='element8 element solo'>Element</div>
   <div class='element9 element solo'>Element</div>

每个元素都有一个唯一标识符：.element${1,2,3,...6}。
每个元素都属于一个公共组：.element。
每个元素都属于一个子组：.element1 和 .element2 是 .nested。

收集所有.nested元素并将它们添加到.container：

     $('.container').append($('.nested'));

如果.test 通过（真），则获取.data，并将尽可能多的.solo 元素更改为.nested 所指示的data-stat 值.data。

      if(test) {
        let stat = $('.data').data('stat');
        var array = $('.solo').toArray();
        for (let i = 0; i < parseFloat(stat); i++) {
           let node = array[i];
           $(node).removeClass('solo').addClass('nested');
        }
      }

尝试使用 OP 代码，JK。

最后 4 个示例：C67、C89、CAB 和 CCD

最后 4 个示例实现了与之前相同的目标，但 Demo 的重点是展示 2 个 div 的不同方式放在另一个div中。这些示例中的每一个都将字符串解析为 HTML。
C67： jQuery html() 方法：
- 使用模板文字而不是字符串文字来创建 htmlString：
```
`<div class="E6"></div><div class="E7"></div>`;
```
- 字符串将被解析为$('C67')内的HTML；之前$('.67') 中的任何内容都会被覆盖。
```
$('.C67').html(`<div class="E6"></div><div class="E7"></div>`);
```
C89： jQuery replaceWith() 方法：
- 它将$(selector) 替换为给定的参数，该参数可以是jQuery 对象、DOM 对象、数组、htmlString 等...
- 在示例中，.C89 被替换为自身的 htmlString 副本，其中 .E8 和 .E9 已嵌套在其中。
```
 $(".C89").replaceWith({`<div class="C89">
                          <div class="E8"></div>
                          <div class="E9"></div>
                      </div>`});
```
CAB：纯 JavaScript 属性 innerHTML：
- html() 是 innerHTML 有一些检查。 注意： jQuery get(0) 方法包含在以下语句中：
$('.CAB').get(0).innerHTML="<div class='EA'></div><div class='EB'></div>";
- 当在 jQuery 对象上使用纯 JavaScript 方法和属性时，我们必须 取消引用 jQuery 对象，然后将其更改为 DOM 对象。更重要的是，我们利用了使用 jQuery 对象来引用元素并使用 JavaScript 方法/属性，这些方法/属性平均比 jQuery 更冗长，但速度更快（当然在小规模上速度并不明显）。
CCD：纯JavaScript方法insertAdjacentHTML()：
- 此方法可以关闭任何来自 JavaScript 和 jQuery 的 HTML 解析器。它比任何其他 HTML 解析器更灵活、快速且实际上更安全，因为与 innerHTML 和 .html() 等其他解析器不同，iAHTML() 插入字符串 进入或围绕目标元素，它永远不会覆盖和破坏内容。

注意：括号符号包含在下面的语句中。

$('.CCD')[0].insertAdjacentHTML('beforeend', '<div class="EC"></div> <div class="ED"></div>');

[0] 是另一种取消引用 jQuery 对象的方法（参见示例 CAB）。

演示

测试

点击任意蓝色（青色）文本。
一个窗口应该滑动打开，以绿色文本显示代码。
点击左下角的按钮。

//C01~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/* EXAMPLE C01 */
function C01(e) {
  $('.E0, .E1').prependTo($('.C01'));
}
//C23~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/* EXAMPLE C23 */
function C23(e) {
  $('.C23').wrapInner($('.E2, .E3'));
}
//C45~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/* EXAMPLE C45 */
function C45(e) {
  $('.E4, .E5').addClass('E');
  $('.E').appendTo($('.C45'));
}
//C67~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/* EXAMPLE C67 */
function C67(e) {
  var E67 = `<div class='E6'></div>
  <div class='E7'></div>`;
  $('.C67').html(E67);
}
//C89~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/* EXAMPLE C89 */
function C89(e) {
  var CE89 = `<div class='C89'>
  <div class='E8'></div>
  <div class='E9'></div>
  </div>`;
  $('.C89').replaceWith(CE89);
}
//CAB~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/* EXAMPLE CAB */
function CAB(e) {
  var CEAB = `<div class='EA'></div>
  <div class='EB'></div>`;
  $('.CAB').get(0).innerHTML = CEAB;
}
//CCD~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/* EXAMPLE CCD */
function CCD(e) {
  var CECD = `<div class='EC'></div>
  <div class='ED'></div>`;
  var CCD = $('.CCD')[0];
  CCD.insertAdjacentHTML('beforeend', CECD);
}

html,
body {
  font: 900 16px/1 Consolas;
}

main {
  display: flex;
  flex-flow: row nowrap;
}
dl {
  margin: 0 0 0 5px
}
details {
  background: #000;
}
summary {
  font:400 18px/1.2 "Palatino Linotype";
  color:cyan;
  cursor: pointer;    
}
section {
  display: flex;
  flex-flow: column nowrap;
  width: 30%;
}

section:first-of-type {
  width: 65%
}

[class^=C] {
  border: 2.5px 5px 2.5px 5px;
  border-style: ridge;
  border-color: tomato;
  height: 60px;
  padding: 5px 5px 10px;
  background: rgba(51, 51, 51, 0.1);
}


/* This declaration enables each matched node to display its
classList as text content */

[class^=C]::before,
[class^=E]::before {
  content: attr(class);
}

[class^=E] {
  border: 4px 3px 4px 3px;
  border-style: inset;
  border-color: navy;
  text-align: center;
  background: rgba(11, 11, 11, 0.6);
  color: yellow;
}

.jQIndex {
  width: 35%;
  display: inline-block;
  align-self: flex-start;
  line-height: 50px;
}

pre {
  margin: 0;
  padding: 5px;
}

code {
  white-space: pre-wrap;
  padding: 0;
  margin: 0;
  background: #000;
  color: lime;
}

dt {
  margin-left: 10px
}

<main>
  <section>
    <!--BEGIN EXAMPLE C01-->
    <div class='C01'></div>
    <div class='E0'></div>
    <div class='E1'></div>
    <details>
      <summary>C01 prependTo()</summary>
      <pre><code>
$('.E0, .E1').prependTo($('.C01'));
      </code></pre>
      <button onclick='C01()'>prependTo</button>
    </details>
    <!--=END EXAMPLE C01=-->

    <!--BEGIN EXAMPLE C23-->
    <div class='C23'></div>
    <div class='E2'></div>
    <div class='E3'></div>
    <details>
      <summary>C23 wrapInner()</summary>
      <pre><code>
$('.C23').wrapInner($('.E2, .E3'));
      </code></pre>
      <button onclick='C23()'>wrapInner</button>
    </details>
    <!--=END EXAMPLE C23=-->

    <!--BEGIN EXAMPLE C45-->
    <div class='C45'></div>
    <div class='E4'></div>
    <div class='E5'></div>
    <details>
      <summary>C45 addClass()/appendTo()</summary>
      <pre><code>
$('.E4, .E5').addClass('E');
$('.E').appendTo($('.C45'));
      </code></pre>
      <button onclick='C45()'>addClass/apendTo</button>
    </details>
    <!--=END EXAMPLE C45=-->

    <!--BEGIN EXAMPLE C67-->
    <div class='C67'></div>
    <details>
      <summary>C67 html()</summary>
      <pre><code>
var E67 =` &lt;div class='E6'&gt;&lt;/div&gt;
&lt;div class='E7'&gt;&lt;/div&gt;`;
$('.C67').html(E67);
      </code></pre>
      <button onclick='C67()'>html</button>
    </details>
    <!--=END EXAMPLE C67=-->

    <!--BEGIN EXAMPLE C89-->
    <div class='C89'></div>
    <details>
      <summary>C89 replaceWith()</summary>
      <pre><code>
var CE89 = `&lt;div class='C89'&gt;
&lt;div&nbsp;class='E8'&gt;&lt;/div&gt;
&lt;div&nbsp;class='E9'&gt;&lt;/div&gt;
&lt;/div&gt;`;
$('.C89').replaceWith(CE89);
      </code></pre>
      <button onclick='C89()'>replaceWith</button>
    </details>
    <!--=END EXAMPLE C89=-->

    <!--BEGIN EXAMPLE CAB-->
    <div class='CAB'></div>
    <details>
      <summary>CAB innerHTML</summary>
      <pre><code>
var CEAB =`&lt;div&nbsp;class='EA'&gt;&lt;/div&gt;
&lt;div&nbsp;class='EB'&gt;&lt;/div&gt;`;
$('.CAB').get(0).innerHTML = CEAB;
      </code></pre>
      <button onclick='CAB()'>innerHTML</button>
    </details>
    <!--=END EXAMPLE CAB=-->

    <!--BEGIN EXAMPLE CCD-->
    <div class='CCD'></div>
    <details>
      <summary>CCD insertAdjacentHTML()</summary>
      <pre><code>
var CECD = `&lt;div class='EC'&gt;&lt;/div&gt;
&lt;div&nbsp;class='ED'&gt;&lt;/div&gt;`;
var CCD = $('.CCD')[0];
CCD.insertAdjacentHTML('beforeend', CECD);
      </code></pre>
      <button onclick='CCD()'>insertAdjacentHTML</button>
    </details>
    <!--=END EXAMPLE CCD=-->
  </section>
  <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
  <section>
    <nav class='jQIndex'>
      <dl>
        <dt>jQuery</dt>
        <dd>
          <a href='https://api.jquery.com/prependTo/'>prependTo()</a>
        </dd>
        <dd>&nbsp;</dd>
        <dd>
          <a href='https://api.jquery.com/wrapInner/'>wrapInner()</a>
        </dd>
        <dd>
          <a href='https://api.jquery.com/addClass/'>addClass()</a>
        </dd>
        <dd>
          <a href='https://api.jquery.com/appendTo/'>appendTo()</a>
        </dd>
        <dd>&nbsp;</dd>
        <dd>
          <a href='https://api.jquery.com/html/'>html()</a>
        </dd>
        <dd>&nbsp;</dd>

        <dd>
          <a href='https://api.jquery.com/replaceWith/'>replaceWith()</a>
        </dd>
        <dt>JavaScript</dt>
        <dd>
          <a href='https://stackoverflow.com/a/43665202/2813224'>insertAdjacentHTML() vs. innerHTML</a>
        </dd>
        <dt>Miscellaneous</dt>
        <dd>
          <a href='https://api.jquery.com/category/selectors/'>Selectors</a>
        </dd>
        <dd>
          <a href='https://oscarotero.com/jquery/#selectors'>jReference</a>
        </dd>
        <dd>
          <a href='https://learn.jquery.com/using-jquery-core/faq/how-do-i-pull-a-native-dom-element-from-a-jquery-object/'>Dereferencing</a></dd>
      </dl>
    </nav>
  </section>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

【讨论】：

【解决方案2】：

您可以使用 jQuery append() 方法。

Check this.

【讨论】：

我很好奇为什么这个答案被否决了。是因为格式不规范吗？ append() 方法可用于实现试图实现的目标