Я бы хотел, чтобы переместить один элемент div внутри другого. Например, я хочу перенести это (включая всех детей):
<div id="source">
...
</div>
в этом:
<div id="destination">
...
</div>
так что у меня есть это:
<div id="destination">
<div id="source">
...
</div>
</div>
Вы можете использовать добавление
функция (которая добавляет в конец элемента):
$("#source").appendTo("#destination");
В качестве альтернативы вы могли бы использовать prependTo
функция (которая добавляет в начало элемент):
$("#source").prependTo("#destination");
Пример:
в
$("#appendTo").click(function() {
$("#moveMeIntoMain").appendTo($("#main"));
});
$("#prependTo").click(function() {
$("#moveMeIntoMain").prependTo($("#main"));
});
#main {
border: 2px solid blue;
min-height: 100px;
}
.moveMeIntoMain {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">main</div>
<div id="moveMeIntoMain" class="moveMeIntoMain">move me to main</div>
<button id="appendTo">appendTo main</button>
<button id="prependTo">prependTo main</button>
в
мое решение:
Ход:
jQuery("#NodesToMove").detach().appendTo('#DestinationContainerNode')
Копия:
jQuery("#NodesToMove").appendTo('#DestinationContainerNode')
Обратите внимание на использование .отсоединить(). При копировании, будьте осторожны, что вы не дублируя идентификаторы.
Если див
, где вы хотите поместить свой элемент имеет содержимое, и вы хотите, чтобы элемент, чтобы показать после основное содержание:
$("#destination").append($("#source"));
Если див
, где вы хотите поместить свой элемент имеет содержимое, и вам хочу показать элемент до основное содержание:
$("#destination").prepend($("#source"));
Если див
, где вы хотите поместить свой элемент является пустым, или вы хотите, чтобы заменить его целиком:
$("#element").html('<div id="source">...</div>');
Если вы хотите, чтобы дублировать элемент, прежде чем любой из вышеперечисленных:
$("#destination").append($("#source").clone());
// etc.
А как насчет язык JavaScript решение?
Объявить фрагмент:
фрагмент ВАР = документ.createDocumentFragment();
Добавить нужный элемент к фрагменту:
фрагмент.метода appendChild(документ.метода getElementById('Источник'));
Фрагмент добавить нужный элемент:
документ.метода getElementById('пункт назначения').метода appendChild(фрагмент);`
[Проверить это.][1]
Вы можете использовать:
Вставить После,
jQuery("#source").insertAfter("#destination");
Чтобы вставить внутрь другого элемента,
jQuery("#source").appendTo("#destination");
Когда-нибудь пробовали обычный JavaScript... назначения.метода appendChild(источник);
?
в
onclick = function(){ destination.appendChild(source); }
div{ margin: .1em; }
#destination{ border: solid 1px red; }
#source {border: solid 1px gray; }
<!DOCTYPE html>
<html>
<body>
<div id="destination">
###
</div>
<div id="source">
***
</div>
</body>
</html>
в
Если вы хотите быстро демо и подробности о том, как вы перемещаете элементы, попробуйте эту ссылку:
http://html-tuts.com/move-div-in-another-div-with-jquery
Вот короткий пример:
Чтобы двигаться выше элемент:
$('.whatToMove').insertBefore('.whereToMove');
Для перемещения через элемент:
$('.whatToMove').insertAfter('.whereToMove');
Для перемещения внутри элемента, прежде все элементы внутри контейнера:
$('.whatToMove').prependTo('.whereToMove');
Для перемещения внутри элемента, все элементы внутри контейнера:
$('.whatToMove').appendTo('.whereToMove');
Вы можете использовать следующий код, чтобы переместить источника к месту назначения
jQuery("#source")
.detach()
.appendTo('#destination');
попробовать работать сайт CodePen
в
function move() {
jQuery("#source")
.detach()
.appendTo('#destination');
}
#source{
background-color:red;
color: #ffffff;
display:inline-block;
padding:35px;
}
#destination{
background-color:blue;
color: #ffffff;
display:inline-block;
padding:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="source">
I am source
</div>
<div id="destination">
I am destination
</div>
<button onclick="move();">Move</button>
в
Старый вопрос, но не получил здесь, потому что мне нужно перемещать содержимое из одной емкости в другую , включая все прослушиватели событий.
в jQuery не'Т есть способ сделать это, но стандартная функция метода appendChild дом делает.
//assuming only one .source and one .target
$('.source').on('click',function(){console.log('I am clicked');});
$('.target')[0].appendChild($('.source')[0]);
С помощью метода appendChild удаляет .источника и помещает его в цель, включая его'прослушивателей событий с: https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild
Я заметил, что огромная утечка памяти & разница в производительности между insertAfter
& после
или метод insertbefore
& перед
.. Если у вас есть тонны DOM-элементов, или вам нужно использовать после()или
до()` внутри MouseMove event, браузер памяти вероятно увеличить и следующие операции будут выполняться очень медленно.
Решение Я'вэ только опытные заключается в использовании inserBefore, а не до () и insertAfter, а не после()`.
Вы можете использовать чистый JavaScript, то с помощью метода appendChild()` метод...
метод appendChild() добавляет узел в качестве последнего дочернего узла.
Совет: Если вы хотите создать новый пункт с текстом, Не забудьте создавать текст в виде текстового узла, который вы добавите в пункт, затем добавить пункт в документ.
вы можете также использовать этот метод, чтобы переместить элемент из одного элемента У другой.
совет: используйте метод insertbefore() метод, чтобы добавить новый дочерний узел перед указано, существующий дочерний узел.
Так что вы можете сделать, чтобы сделать эту работу, это то, что я создал для вас, с помощью метода appendChild()`, запустить и посмотреть, как это работает для вашего случая:
в
function appendIt() {
var source = document.getElementById("source");
document.getElementById("destination").appendChild(source);
}
#source {
color: white;
background: green;
padding: 4px 8px;
}
#destination {
color: white;
background: red;
padding: 4px 8px;
}
button {
margin-top: 20px;
}
<div id="source">
<p>Source</p>
</div>
<div id="destination">
<p>Destination</p>
</div>
<button onclick="appendIt()">Move Element</button>
в
Для полноты картины, есть еще один подход обертывание()
или wrapAll (), приведенным в [настоящей статьи](https://www.elated.com/articles/jquery-adding-elements/#wrap-wrapAll-wrapInner). Так что ОП'ы вопрос может быть решена с помощью этого (если предположить, что в
<див ИД="по назначению" и />` еще не существует, следующий подход будет создать такую оболочку с нуля - ОП не ясно, о том, фантик уже существует или нет):
$("#source").wrap('<div id="destination" />')
// or
$(".source").wrapAll('<div id="destination" />')
Это звучит многообещающе. Однако, когда я пытаюсь сделать `$(" и[ИД^=строка] и").wrapAll(" в<полей></полей>") смотрите на несколько вложенную структуру такой:
<div id="row1">
<label>Name</label>
<input ...>
</div>
Это правильно обертывания тех, в <див>...</дел>
и в <ввод>...</входной сигнал>
но почему-то оставляет в организации <ярлык>...</ярлык>
. Так что я в конечном итоге использовать явное `$("и строкой 1 и").добавить(" и#a_predefined_fieldset и") вместо этого. Так что YMMV.