如何在div中添加两个现有元素？

时间：2018-05-11 17:47:39

标签： jquery html html5

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

<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中？

2 个答案:

答案 0 :(得分：0)

<小时/>

问题

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

＆＃34;如何使用类容器将这两个div添加到div中？＆＃34;

<小时/>

解决方案

将收集.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功能。之前的示例B00 （位于上方）使用最常用的jQuery方法进行DOM操作： append() 。

<小时/>

7个例子

<小时/>

前3个例子：C01，C23，＆amp; C45

  1. 前两个示例各自提供了另一种jQuery方法 实现同样的目标。 请参阅 C01 prependTo() 和 C23 wrapInner() 。

  2. 第三个示例更多地涉及您计划编码的需要。 我很清楚用户无法改变他们的代码 限制性（更像是有限的）CMS，或者 适当的代码你的雇主禁止任何人改变。更常见的是 可能是用户不习惯使用脚本 或者用户有足够的知识来假设一些建议的解决方案 不起作用，因为它没有做用户认为他或她的事情 需要（即使解决方案实际上解决了问题。）不是 说你是后一种类型的用户，但我闻到了XY Problem。因此，第三个示例C45 ，涉及添加a Common Class 至.E4（OP代码中为.element1）和.E5 （OP代码中的.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

    3. 如果您无法对HTML或CSS中的任何内容进行硬编码，则这是在加载时应采取的额外步骤。快速比较：

    OP代码

       <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通过（true），则获取.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和＆amp; CCD

    1. 最后4个例子实现了与以前相同的目标，但是 演示的目的是展示2个div可以采用的不同方式 放在另一个div。这些示例中的每一个都将字符串解析为HTML。

    2. 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>`);

    3. 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>`});

    4. CAB：普通JavaScript属性innerHTML：

      • html() innerHTML有一些检查。 注意：以下语句中包含的jQuery get(0)方法：

      $('.CAB'). 获取（0） .innerHTML="<div class='EA'></div><div class='EB'></div>";

      • 在jQuery对象上使用Plain JavaScript方法和属性时，我们必须 取消引用 jQuery对象，后者又将其更改为DOM对象。更重要的是，我们利用jQuery Object来引用一个元素并使用JavaScript方法/属性，这些方法/属性平均比jQuery更冗长，但速度更快（当然，速度在小范围内并不明显）。

    5. CCD：纯JavaScript方法insertAdjacentHTML()：

      • 这种方法从JavaScript和jQuery中打开了任何HTML解析器的大门。它比任何其他HTML解析器更灵活，更快速且更安全，因为与其他innerHTML和.html()不同，iAHTML() 插入 < / strong>字符串 进入或围绕 目标元素，它永远不会覆盖和销毁内容。

      6. 注意：括号表示法包含在下面的语句中。

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

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

      演示

      <小时/>

      测试

      1. 点击任何蓝色（青色）文字。
      2. 窗口应该以绿色文本滑动打开显示代码。
      3. 点击左下角的按钮。

        4. ＆＃13;
        ＆＃13; 
        //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);
}
        ＆＃13; 
        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
}
        ＆＃13; 
        <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>
        ＆＃13;
        ＆＃13;
        ＆＃13;

答案 1 :(得分：-2)

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

Check this.

相关问题
最新问题