Javascript - нужно добавить несколько div с одинаковым содержимым внутри одного div по клику против родительского div

Удаление элементов в jQuery

В jQuery один элемент вы удаляете с помощью метода remove(), а для удаления всех вложенных элементов есть метод empty(). Само собой, что вы должны сначала подключить эту библиотеку, скачав ее на оффсайте или используя CDN. При использовании обоих методов все данные, включая обработчики событий, удаляются вместе с элементом.

Пример с использованием методов jQuery remove() и empty()

Давайте используем оба метода jQuery — remove() и empty() — в примере: при клике на любом из абзацев вы удаляете только этот абзац, при клике на кнопке — удаляете все содержимое .

Метод empty() в jQuery

JavaScript

<div id=»myDiv»>
<p>Текст 1-го абзаца внутри div#myDiv</p>
<p>Текст 2-го абзаца внутри div#myDiv</p>
<p>Текст 3-го абзаца внутри div#myDiv</p>
<button class=»btn btn-primary» id=»clearDiv»>Очистить div</button>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<p>Текст1-гоабзацавнутриdiv#myDiv<p>

<p>Текст2-гоабзацавнутриdiv#myDiv<p>

<p>Текст3-гоабзацавнутриdiv#myDiv<p>

<button class=»btn btn-primary»id=»clearDiv»>Очиститьdiv<button>

<div>

(function($){

$(‘#myDiv p’).on(‘click’,function(){

$(this).remove();

});

$(‘#clearDiv’).on(‘click’,function(){

$(‘#myDiv’).empty();

});

})(jQuery);

</script>

Попробуйте сами:

Текст 1-го абзаца внутри div#myDiv

Текст 2-го абзаца внутри div#myDiv

Текст 3-го абзаца внутри div#myDiv

Очистить div

Метод jQuery elem.detach()

Можно также использовать метод detach(), который не удаляет данные и обработчики событий вместе с элементами. Он хорош в том случае, если вы планируете после каких-либо действий вернуть элементы на свое бывшее или в другое место. Например, мы можем перемещать между 2-мя блоками, используя метод для удаления списка из первого элемента и метод для добавления этого списка во второй блок. Удаленный список мы сохраняем в переменную, которую используем при добавлении списка во второй, а затем и в первый блок. При этом можно заметить, что при клике на элементах нашего перемещаемого списка срабатывают собственные события клика, которые изменяют его внешний вид за счет добавления/удаления класса .

Использование метода jQuery detach()

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<style>

#full, #empty {

displayinline-block;

margin7px;

width40%;

padding10px;

border2pxdotted#154574;

cursorpointer;

}

#full {background-color#a8bcff;}

#empty {background-color#a8daff;}

.different {background-color#092ca2;color#fff;}

</style>

<h3>Первый<h3>

<li>Lorem ipsum dolor sit.<li>

<li>Obcaecati distinctio deserunt mollitia.<li>

<li>Magni omnis,odit iure?<li>

<li>Saepe,eum delectus eius!<li>

<ul>

<div>

<h3>Второй<h3>

<div>

(function($){

let ul=null;

$(‘#full’).on(‘click’,function(){

if($(this).find(‘*’).is(‘#myUl’))ul=$(‘#myUl’).detach();

elseul.appendTo($(this));

});

$(‘#empty’).on(‘click’,function(){

ul.appendTo($(this));

});

$(‘#myUl li’).click(function(){

$(this).toggleClass(‘different’);

});

})(jQuery);

</script>

Поэкспериментируйте самостоятельно, кликая то на первом, то на втором блоке.

Второй

В jQuery также можно удалить вложенные элементы и такими способами:

Способы удаления элементов в jQuery

JavaScript

elem.children().remove();
//или
elem.html(«»);

1
2
3

elem.children().remove();

//или

elem.html(«»);

Пример использования

Теги и

Абзацы мы объединили тегом &amplt;div&ampgt;, а это слово мы заключили тегом &amplt;span&ampgt;.

С помощью встроенной таблицы стилей мы выделили это слово красным цветом, а блок текста получил зеленый цвет.

Обратите внимание, что тег &amplt;div&ampgt; является блочным и это означает, что его содержимое всегда будет начинаться с новой строки, при этом элемент занимает всю доступную ширину.

Этот блок тоже содержит два абзаца. С помощью встроенной таблицы стилей мы указали для всего блока цвет заднего фона — khaki, а для этога слова orangeRed (мы заключили его в тег &amplt;span&ampgt;).

. В этом примере мы:

В этом примере мы:

Блочными элементами <div> создали два блока, содержащие по два абзаца текста внутри (элементы <p>).
Для первого блока с помощью встроенной таблицы стилей мы указали, что все элементы получат цвет текста зеленый, а одно слово, которое мы поместили внутри тега <span> красный.
Для второго блока с помощью встроенной таблицы стилей мы указали, что весь блок получит цвет заднего фона хаки, а одно слово, которое мы поместили внутри тега <span> оранжево-красный.

Результат нашего примера:

Использование тегов разметки в HTML.

Атрибуты¶

Атрибут	Значение	Описание
align	leftrightcenterjustify	Используется для выравнивания содержимого тега <div>.Не поддерживается в HTML5. Вместо атрибута align вы можете использовать CSS свойство text-align.

Тег <div> поддерживает глобальные атрибуты и атрибуты событий.

Как добавить стиль к тегу <div> ?

Цвет текста внутри тега <div>:

CSS свойство color определяет цвет контента и оформления текста.
CSS свойство background-color устанавливает фоновый цвет элемента.

Стили форматирования текста для тега <div>:

CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
CSS свойство word-break указывает перенос строки.

Другие свойства для тега <div>:

CSS свойство text-shadow добавляет тень к тексту.
CSS свойство text-align-last выравнивает последнюю строку текста.
CSS свойство line-height устанавливает межстрочный интервал.
CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
CSS свойство word-spacing устанавливает расстояние между словами в тексте.

Свойство overflow

Свойство позволяет взять под контроль переполнение элемента и подсказать браузеру, как он должен себя вести. Значение overflow по умолчанию – , что означает — «показывать контент, когда он выходит за границы блока».

Чтобы обрезать контент выходящий за пределы блока, вы можете установить . Это свойство делает именно то, о чём говорит: скрывает выходящий за пределы контент. Помните, что это может сделать часть содержимого невидимым. Используйте данное значение только в том случае, если скрытие содержимого не вызовет проблем.

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

Удалите часть содержимого из поля ниже

Обратите внимание, что полосы прокрутки остаются, даже если прокрутка не требуется

В приведённом выше примере нам нужно прокручивать содержимое только по оси , однако мы получаем полосы прокрутки по обеим осям. Вы можете использовать свойство (en-US), которое позволяет прокручивать содержимое только по оси .

Вы также можете установить прокрутку по оси x с помощью (en-US), но это не рекомендуемый способ отображения длинных слов! Если у вас есть длинное слово в маленьком поле, вы можете использовать свойства или . Кроме того, некоторые методы, описанные в разделе Изменение размеров в CSS, могут помочь вам создавать блоки, которые лучше масштабируются с различным объемом содержимого.

Как и в случае со , вы получаете полосу прокрутки независимо от того, достаточно ли содержимого для её появления.

Примечание: вы можете точно задать прокрутку по осям x и y, используя свойство , передав два значения. Первое значение будет относиться к , а второе — к . Если передать одно значение, то и получат одинаковые значения. Например, устанавливает в и в .

Если вы хотите, чтобы полосы прокрутки отображались только тогда, когда содержимого больше, чем может поместиться в поле, используйте . Это позволяет браузеру автоматически определять, следует ли отображать полосы прокрутки.

В приведённом ниже примере уменьшите количество содержимого так, чтобы оно поместилось в поле. Вы должны увидеть, что полосы прокрутки исчезнут.

Используем функцию appendTo()

Можно пойти и другим путём, использовав немножко другую функцию, которая называется appendTo() (добавить к). Её отличие в том, что она вызывается не с родительского элемента, а с того, который будет добавлен. То есть эта функция как бы противоположна предыдущей. Результат выполнения следующего кода будет полностью идентичен предыдущему:

$(''<div id="third">Третий</div>'').appendTo(''#main'');

В чём же отличия, спросите Вы? Разница между append() и appendTo() заключается в логике цепочки вызовов. Многие функции jQuery возвращают объект типа jQuery для того, чтобы можно было удобно и компактно продолжить выполнять действия над ними. Взгляните на следующие 2 случая:

// Случай 1
$(''#main'').append(''<div id="third">Третий</div>'').css(''background'', ''red'');
// Случай 2
$(''<div id="third">Третий</div>'').appendTo(''#main'').css(''background'', ''red'');

В первом случае функция append() вернёт объект с ID main, то есть родителя, а затем именно к нему будет прибавлено новое CSS-свойство. Во втором случае функция appendTo() будет возвращать новосозданный элемент, и CSS-свойство будет применено только к нему.

Имейте ввиду, что описанными выше функциями можно не только создавать, а и перемещать уже существующие элементы, например, от одного родителя к другому. Пусть есть следующий HTML:

<div id="main">
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
<div id="fourth"></div>
</div>

Если мы хотим переместить 4-й элемент внутрь третьего, выполнить следующий код:

$(''#fourth'').appendTo(''#third'');

Получим:

<div id="main">
<div id="first"></div>
<div id="second"></div>
<div id="third"><div id="fourth"></div></div>
</div>

Функции prepend() и prependTo()

Как мы выяснили, используя 2 предыдущие функции, можно создать элемент А и поместить его внутрь элемента Б, при этом А помещается в конец Б и становиться его последним дочерним элементом. Функции prepend() и prependTo() поступают наоборот: они делают элемент А первым из дочерних элементов родителя Б, то есть помещают его в начало Б. Если у нас есть такой HTML-код:

<div id="main">
<div id="first">Первый</div>
<div id="second">Второй</div>
</div>

Выполним такой JavaScript:

$(''#main'').prepend(''<div id="zero">Нулевой</div>'');

Получим:

<div id="main">
<div id="zero">Нулевой</div>
<div id="first">Первый</div>
<div id="second">Второй</div>
</div>

Определение и применение

jQuery метод .css() задает или возвращает одно или несколько свойств стиля для выбранных элементов.

Обращаю Ваше внимание, что, когда вы используете метод с целью вернуть заданное в CSS значение свойства, то возвращается значение первого совпадающего элемента. Некоторые универсальные свойства, такие как margin, padding, background, border могут возвращать разные результаты в зависимости от браузера пользователя

Рекомендуется получать такие значения отдельно для каждого свойства, например для ширины границы (доступно с версии jQuery 1.9):

$( selector ).css() // возвращаем значения CSS свойств ширины границы для каждой стороны

Кроме того, вычисляемый размер элемента всегда возвращается в пикселях, но он может быть указан как в em, ex, px, % и т.п. в таблице стилей. В зависимости от браузера значения цвета, может быть возвращено как в системе RGB, так и в шестнадцатиричной (HEX), независимо в какой системе указания цвета это задано в таблице стилей.

DOM

.css({ "background-color": "#000",
	   "border-left": "1px solid green" })

.css({ "backgroundColor": "#000",
	   "borderLeft": "1px solid green" })

Когда число передается как значение, то jQuery преобразует его в строку и добавляет пиксели к концу этой строки. Если свойство требует единицы измерения, отличные от пикселей, то преобразует значение в строку и добавляет соответствующие единицы перед вызовом метода.

Если вы используете метод .css() для того, чтобы установить значение, то jQuery модифицирует значение глобального атрибута style элемента (ниже приведенные методы равноценны):

$( "#myElement" ).css( "color", "red" ) // с использованием библиотеки jQuery

document.getElementById( "#myElement" ).style.color = "red" // на нативном JavaScript

Установка значения атрибута style в пустую строку удаляет свойство из элемента, если оно до этого уже было применено:

$( "#myElement" ).css( "color", "" )

Обратите внимание на важный момент, что пустая строка не удалит стиль, который был применен с использованием внешней, или внутренней таблицы стилей. Обращаю Ваше внимание, что при использовании метода .css(), jQuery игнорирует директиву !important, которая отменяет значимость последнего определенного стиля

Если Вам необходимо сделать какой-то стиль приоритетным, то Вы можете определить это в таблице стилей, и, например, добавить этот класс элементу с помощью метода .addClass().

Обращаю Ваше внимание, что при использовании метода .css(), jQuery игнорирует директиву !important, которая отменяет значимость последнего определенного стиля. Если Вам необходимо сделать какой-то стиль приоритетным, то Вы можете определить это в таблице стилей, и, например, добавить этот класс элементу с помощью метода .addClass().. С версии jQuery 1.4 метод .css() позволяет задать функцию, которая возвращает новое значение для свойства CSS

Если функция ничего не возвращает, или undefined, то в этом случае текущее значение не изменяется. Это может быть полезным для выборочной установки значений только при соблюдении определенных критериев

С версии jQuery 1.4 метод .css() позволяет задать функцию, которая возвращает новое значение для свойства CSS. Если функция ничего не возвращает, или undefined, то в этом случае текущее значение не изменяется. Это может быть полезным для выборочной установки значений только при соблюдении определенных критериев.

$( selector ).сss( "height", function( index ) { 
	return index * 5; // высота элемента увеличивается в зависимости от индекса
});

С версии jQuery 1.6 метод .css() принимает относительные значения, начинающиеся с += или -=, чтобы увеличить или уменьшить текущее значение.

$( selector ).сss( "margin-left", "+=40" ) // увеличит внешний отступ элемента на 40 пикселей (прибавит к текущему значению 40)

С версии jQuery 1.8 метод .css() автоматически проставляет префиксы производителей (-webkit, -moz, -ms и тому подобное).

Создаём и перемещаем элементы с помощью функций before(), after(), insertAfter(), insertBefore()

Функции, рассмотрены ранее, создают или перемещают элементы либо в начало, либо в конец родительского контейнера. Если необходимо поместить объект в заданное место, перед или после другого объекта, тогда можно использовать такие функции:

цель.before(объект) — вставляет объект перед целью и возвращает цель.
цель.after(объект) — вставляет объект после цели и возвращает цель.
объект.insertBefore(цель) — вставляет объект перед целью и возвращает объект.
объект.insertAfter(цель) — вставляет объект после цели и возвращает объект.

Пусть имеется такой HTML:

<div id="main">
<div id="first">Первый</div>
<div id="second">Второй</div>
</div>

Если мы хотим создать какой-либо элемент и поместить его после first и перед second, а затем, к примеру, раскрасить его в зелёный цвет, тогда можно пойти двумя идентичными путями:

// Вариант 1
$(''<div id="one-and-half">Полтора</div>'').insertAfter(''#first'').css(''background'',''green'');
// Вариант 2
$(''<div id="one-and-half">Полтора</div>'').insertBefore(''#second'').css(''background'',''green'');

Если требуется создать объект, например, перед first и затем раскрасить first в зеленый цвет:

$(''#first'').before(''<div id="one-and-half">Полтора</div>'').css(''background'',''green'');

Я думаю, логика понятна, ничего сложного нет.

Пример с удалением и скрытием/отображением элемента

Допустим вам нужно удалить некий div с анимацией, которая запускается по клику на этом div-е и всего один раз

Для одноразовой обработки собвтия можно использовать событие jQuery или метод — в конце важно указать. Для удаления div-а используем метод , который есть как в нативном JavaScript, так и jQuery, а скрыть/показать элемент можно простым переключением между класса hidden с единственным свойством

Код примера с удалением div-а и изменением его отображения

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<style>

#animation {

width400px;

margin20pxauto;

positionrelative;

text-aligncenter;

}

#frame {

width50px;

height72px;

margin15pxauto;

border1pxsolidtransparent;

backgroundurl(https//s.cdpn.io/79/sprite-steps.png)no-repeatlefttop;

}

@keyframes frame-animation {

0% {background-position0px;}

100% {background-position-500px;}

}

.hidden {displaynone;}

</style>

<button class=»button»id=»showHide»>Показатьспрятать<button> 

<button class=»button»id=»removeDiv»>Удалитьdivсовсем<button>

<div>

frame.addEventListener(‘click’,function(){

this.style.animation=’frame-animation 1s steps(10) infinite’;

},{oncetrue})

showHide.addEventListener(‘click’,function(){

frame.classList.toggle(‘hidden’);

})

removeDiv.addEventListener(‘click’,function(){

frame.remove();

})

</script>

<div>

Протестировать пример можно прямо сейчас. Для запуска анимации щелкните на картинке.

Показать/спрятать Удалить div совсем

Удаление методом remove()

По сравнению с метод remove() прост и понятен:

Метод remove()

JavaScript

element.remove()

1	element.remove()

Т.е. все, что вам нужно сделать — это обратиться к элементу и вызвать метод . Рассмотрим его также на примере, в котором по клику будут исчезать однотипные html-блоки:

Использование метода remove()

JavaScript

.myblock:nth-child(2) { background-color: #bc0b0b; }

.myblock:nth-child(3) { background-color: #057e21; }

.myblock:nth-child(4) { background-color: #dd04cc; }
</style>
<div class=»test»>
<div class=»myblock»>
<h3>Исчезающий блок 1</h3>
</div>
<div class=»myblock»>
<h3>Исчезающий блок 2</h3>
</div>
<div class=»myblock»>
<h3>Исчезающий блок 3</h3>
</div>
<div class=»myblock»>
<h3>Исчезающий блок 4</h3>
</div>
</div>
<script>
let myblock = document.querySelectorAll(‘.myblock’);

myblock.forEach(block => block.addEventListener(‘click’, removeBlock));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

<style>

.myblock {

displayinline-block;

width150px;

height150px;

border2pxsolid#444;

background-color#2a30b2;

text-aligncenter;

color#fff;

padding10px;

margin8px;

cursorpointer;

}

.myblock:nth-child(2) {background-color#bc0b0b;}

.myblock:nth-child(3) {background-color#057e21;}

.myblock:nth-child(4) {background-color#dd04cc;}

</style>

<h3>Исчезающийблок1<h3>

<div>

<h3>Исчезающийблок2<h3>

<div>

<h3>Исчезающийблок3<h3>

<div>

<h3>Исчезающийблок4<h3>

<div>

let myblock=document.querySelectorAll(‘.myblock’);

myblock.forEach(block=>block.addEventListener(‘click’,removeBlock));

functionremoveBlock(){

let block=this;

block.style.opacity=1;

let blockId=setInterval(function(){

if(block.style.opacity>)block.style.opacity-=.1;

else{

clearInterval(blockId);

block.remove();

}

},60)

}
</script>

В этом примере использован метод для формирования постепенного исчезновения блока.

Исчезающий блок 4

Поскольку метод remove() относится к новому стандарту, он совсем не поддерживается в Internet Explorer (до 11 версии включительно), Opera Mini (она вообще мало, что поддерживает из новых стандартов), а в более прогрессивных Chrome & Firefox поддержка есть с 23 версии, в Opera — с 15, в Safari — с 7, т.е. примерно с 2012 года. Более полная информация — на сайте :

Для браузеров, не поддерживающих данный метод (и ряд других), можно использовать полифилы или DOMShim.

Как удалить элемент в jQuery?

В jQuery имеется несколько методов для удаления элементов из DOM.

Первый метод – это .

Данный метод позволяет удалить все или часть элементов из выбранного набора.

Синтаксис метода :

.detach(  )

Параметр является не обязательным. Он используется для указания селектора, в соответствии с которым будут удаляться не все элементы из набора, а только те которые ему соответствуют.

Например, удалим все элементы с классом info на странице:

$('.info').detach();

Метод при удалении элементов не удаляет связанные с ними данные jQuery и обработчики событий. Таким образом при восстановлении элементов, удалённых с помощью метода , они будут связаны со всеми своими данными jQuery и обработчиками событий.

Рассмотрим это на примере:

<div id="detach-wrapper">
  <p>Кнопка, удалять которую будем с помощью метода detach:</p>
  <button id="detach">Нажмите для удаления</button>
</div>
<div id="remove-wrapper">
  <p>Кнопка, удалять которую будем с помощью метода remove</p>
  <button id="remove">Нажмите для удаления</button>
</div>
<div>
  <button id="action-add">Восстановить удалённые кнопки</button>
</div>

<script>
  // переменные, в которые будем сохранять кнопки, чтобы их можно было вернуть обратно
  var detachBtn, removeBtn;

  $('#detach').click(function () {
    // удаляем кнопку с помощью метода detach, сохраняем её в переменную detachBtn
    detachBtn = $(this).detach();
  });

  $('#remove').click(function () {
    // удаляем кнопку с помощью метода remove, сохраняем её в переменную removeBtn
    removeBtn = $(this).remove();
  });
  
  // при нажатию на кнопку #action-add добавляем удалённые кнопки detachBtn и removeBtn на страницу
  $('#action-add').click(function () {
    if ($('#detach').length === 0) {
      $('#detach-wrapper').append(detachBtn);
    }
    if ($('#remove').length === 0) {
      $('#remove-wrapper').append(removeBtn);
    }
  });
</script>

Второй метод – это .

Это метод предназначен для удаления все дочерних узлов у каждого элемента из текущего набора.

Синтаксис метода :

.empty()

Пример, в котором удалим все дочерние узлы у элемента с идентификатором «message»:

$('#message').empty();

Пример, в котором при нажатии на кнопку, получим элемент в котором она находится по селектору и удалим его содержимое:

<div class="content">
  <p>Содержимое 1...</p>
  <button>Удалить содержимое</button>
</div>

<script>
  $('button').click(function () {
    // получим блок с .content в котором находится эта кнопка и удалим всё его содержимое
    $(this).closest('.content').empty(); 
  })
</script>

Чтобы избежать утечек памяти, jQuery удаляет другие конструкции, такие как данные и обработчики событий, из дочерних элементов перед удалением самих элементов.

Если вы хотите удалить элементы, не уничтожая их данные или обработчики событий (чтобы их можно было добавить позже), используйте вместо метод .

Третий метод – это .

Он используется для удаления выбранных элементов из DOM.

Синтаксис метода remove:

.remove(  )

Параметр является не обязательным. Его нужно использовать, когда вам нужно удалить из набора не все элементы, а только те которые соответствуют селектору.

Метод похож на , но в отличии от него он удаляет не только все дочерние узлы, но и сам элемент. В дополнение вместе с элементами удаляются все связанные с ними события и данные jQuery. Если вам нужно удалить элементы без удаления данных и событий, то используйте метод .

Пример, в котором будем удалять кнопку при нажатии на неё.

  $('button').click(function() {
    $(this).remove();
  });

Четвёртый метод для удаления элементов из DOM – это .

Метод применяется для удаления только родительских элементов у каждого элемента из текущего набора оставляя при этом соответствующие элементы на месте.

Синтаксис метода :

.unwrap(  )

Метод имеет один необязательный параметр . В качестве данного параметра задаётся селектор, который будет использоваться для проверки родительского элемента. Если родительский элемент не соответствует селектору, то он не будет убран из DOM.

Пример использования метода для удаления оборачиваемых элементов у каждого элемента текущего набора:

<div class="container-1">
  <div class="inner"></div>
</div>
<div class="container-2">  
  <div class="inner"></div>  
</div>

<script>
$('.inner').unwrap();

// после выполнения:
// <div class="inner"></div>
// <div class="inner"></div>
</script>

С использованием . Например будем удалять только те оборачиваемые элементы, которые соответсвуют селектору «.container-1»:

$('.inner').unwrap('.container-1');
    
// после выполнения:
// <div class="inner"></div>
// <div class="container-2">  
//   <div class="inner"></div>  
// </div>

Как переместить элемент в jQuery

Если вам нужно именно переместить элемент, а не скопировать, то в jQuery это можно выполнить посредством использования нескольких методов.

Пример:

<div class="content-1">
  <p>...</p>
  <button id="move">Переместить кнопку в .content-2</button>
</div>
<div class="content-2">
  <p>...</p>
</div>

<script>
  $('#move').detach().appendTo('.content-2');

  // после выполнения:
  // <div class="content-1">
  //   <p>...</p>
  // </div>
  // <div class="content-2">
  //   <p>...</p>
  //   <button id="move">Переместить кнопку в .content-2</button>
  // </div>
</script>

Как в этом примере осуществляется перемещение? Сначала мы получаем элемент, который мы хотим переместить, в данном случае «#move». После этого вызываем метод , который удалит элемент из текущего места. В качестве результата он нам возвратит удалённый элемент. Далее удалённый элемент с помощью метода вставляем в нужное место.

Как создать элемент в jQuery?

Создание элементов в jQuery осуществляется посредством передачи HTML-строки в главную функцию этой библиотеки.

Синтаксис создания элементов из HTML-строки:

jQuery( html  )

Он имеет 2 параметра. Первый () обязательный. Здесь указывается HTML-строка, на основе которой нужно создать соответствующие элементы. Второй () не обязательный. Он необходим для указания документа, в котором необходимо создать элементы. По умолчанию элементы создаются в том же документе, в который была загружена библиотека jQuery. Если вы хотите внедрить элементы в другой документ, то его явно необходимо указать с помощью этого параметра.

Пример создания элемента из HTML-строки:

$('<div class="alert-message">Новый текст сообщения.</div>')

Пример создания элемента не в документе, в который была загружена библиотека jQuery, а в другой :

$('<div>Новый элемент</div>', $('#include').prop('contentWindow').document)

Пример создания нескольких элементов из HTML-строки:

$('<figure>' +
  '<img src="cat_in_hat.png" alt="Кот в шляпе">' +
  '<figcaption>Кот в шляпе</figcaption>' +
'</figure>')

Созданный элемент не отобразиться на странице, так как мы его только создали. Для того чтобы элемент отобразился на странице его нужно вставить в неё. Как это выполнить рассмотрим ниже.

Этот способ создания элементов можно использовать только в том случае, если вы полностью доверяете источнику. Если же вы не уверены в источнике, из которого берёте HTML данные, то обязательно применяйте поэлементный способ создания нужного фрагмента.

Синтаксис создания HTML элемента:

jQuery( html )

Он имеет 2 параметра. Первый параметр () является обязательным. В нём указывается строка, описывающая HTML элемент, который необходимо создать. Например для создания элемнта , она описывается как или как . Второй параметр () является дополнительным. В нём задаются в формате объекта атрибуты, обработчики событий и методы которые нужно добавить или связать с только что созданным элементом.

Cоздадим элемент используя синтаксис jQuery для создания HTML элемента:

$('<div class="alert-message">Новый текст сообщения.</div>')
// поэлементное создание HTML-кода представленного строчкой выше
$('<div>', {
  'class': 'alert-message',
  text: 'Новый текст сообщения.'
})

Cоздадим HTML фрагмент, используя поэлементый способ создания:

$('<figure>' +
  '<img src="cat_in_hat.png" alt="Кот в шляпе">' +
  '<figcaption>Кот в шляпе</figcaption>' +
'</figure>')
// поэлементное создание HTML-кода представленного строчками выше
$('<figure>')
  .append('<img>', {
    src: 'cat_in_hat.png',
    alt: 'Кот в шляпе'
  })
  .append('<figcaption>', {
    text: 'Кот в шляпе'
  });

С методом познакомимся ниже. Он в этом коде используется чтобы добавить элементы и в элемент .