Question

Есть два элемента, созданные из библиотеки, такие как:

<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 в div с классом container?

zer00ne · Answer 1 · 12 мая 2018

Проблема

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

«Как добавить эти два div в div с контейнером класса?»

Решение

Селектор jQuery, который будет собирать любые экземпляры классов .element1 и .element2:

$(".element1, .element2")

Краткое описание синтаксиса:

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

Наконец, нам нужно вставить эту коллекцию jQuery внутрь div.container:

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

В JavaScript есть много способов вставить элементы в другие элементы, и у jQuery есть все собственные возможности JavaScript. В предыдущем примере B00 (расположен выше,) для манипулирования DOM используется наиболее часто используемый метод jQuery: append () .

7 Примеры

Первые 3 примера: C01, C23 и C45

Первые два примера предлагают альтернативный метод jQuery для достичь той же цели. См. C01 prependTo() и C23 wrapInner().
Третий пример больше относится к вашей потребности планировать кодирование. Я хорошо знаю пользователей, которые не могут изменить свой код из-за обстоятельства, такие как ограничительная (более ограниченная) CMS или Кодекс конфиденциальности вашего работодателя запрещает кому-либо изменять. Чаще чем не, это может быть, что пользователю не удобно использовать скрипт или у пользователя достаточно знаний, чтобы предположить какое-то предложенное решение не будет работать, потому что он не делает то, что думает пользователь потребности (даже когда решение действительно решает проблему.) Не говорят, что вы последний тип пользователя, но я чувствую запах XY Проблема . Следовательно, третий Пример C45 , включает добавление Общий Class до .E4 (.element1 в коде OP) и .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 проходит (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 и CCD

Последние 4 примера достигают той же цели, что и раньше, но смысл демонстрации состоит в том, чтобы показать различные способы, которыми могут быть 2 div помещен в другой div. Каждый из этих примеров разбирает строку в HTML.
C67: jQuery html() метод:
- Используйте литералы шаблона вместо строковых литералов для создания htmlString:
```
`<div class="E6"></div><div class="E7"></div>`;
```
- Строка будет проанализирована в HTML внутри $('C67'); что-либо внутри $('.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'). получить (0) .innerHTML="<div class='EA'></div><div class='EB'></div>";
- При использовании простых методов и свойств JavaScript в объекте jQuery мы должны разыменовать объект jQuery, который, в свою очередь, превращает его в объект DOM. Что еще более важно, мы воспользовались преимуществом использования объекта jQuery для ссылки на элемент и использования методов / свойств JavaScript, которые в среднем более многословны, чем jQuery, но быстрее (скорость, конечно, не заметна в небольшом масштабе).
CCD: Простой метод JavaScript insertAdjacentHTML():
- Этот метод открывает двери любого парсера HTML из JavaScript и jQuery. Он гибкий, быстрый и на самом деле более безопасный, чем любой другой анализатор 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'));

<! - = КОНЕЦ ПРИМЕРА C01 = -> <! - НАЧАТЬ ПРИМЕР C23 ->

C23 wrapInner ()


$('.C23').wrapInner($('.E2, .E3'));

<! - = КОНЕЦ ПРИМЕРА C23 = -> <! - НАЧАТЬ ПРИМЕР C45 ->

C45 addClass () / appendTo ()


$('.E4, .E5').addClass('E');
$('.E').appendTo($('.C45'));

<! - = КОНЕЦ ПРИМЕРА C45 = -> <! - НАЧАТЬ ПРИМЕР C67 ->

C67 html ()


var E67 =` &lt;div class='E6'&gt;&lt;/div&gt;
&lt;div class='E7'&gt;&lt;/div&gt;`;
$('.C67').html(E67);

<! - = КОНЕЦ ПРИМЕРА C67 = -> <! - НАЧАТЬ ПРИМЕР C89 ->

C89 replaceWith ()


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);

<! - = КОНЕЦ ПРИМЕРА C89 = -> <! - НАЧАТЬ ПРИМЕР КАБИНЫ ->

CAB innerHTML


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;

<! - = КОНЕЦ ПРИМЕРА CAB = -> <! - НАЧАТЬ ПРИМЕР CCD ->

CCD insertAdjacentHTML ()


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);

<! - = КОНЕЦ ПРИМЕРА CCD = -> <! - ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ->

Sanjucta · Answer 2 · 11 мая 2018

Вы можете использовать метод jQuery append().

Проверьте это.

Как добавить два существующих элемента в div?

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 2 ]

Проблема

Решение

7 Примеры

Первые 3 примера: C01, C23 и C45

ОП-код

Новый код

Последние 4 примера: C67, C89, CAB и CCD

Демо

Тестирование

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Как добавить два существующих элемента в div?

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 2 ]

Проблема

Решение

7 Примеры

Первые 3 примера: C01, C23 и C45

ОП-код

Новый код

Последние 4 примера: C67, C89, CAB и CCD

Демо

Тестирование

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Нет похожих вопросов