Как переместить элемент в другой элемент?
Я хотел бы переместить один элемент div внутри другого. Например, я хочу переместить это (включая всех детей):
<div id="source">
...
</div>
в:
<div id="destination">
...
</div>
Так что у меня есть это:
<div id="destination">
<div id="source">
...
</div>
</div>
13 ответов
мое решение:
переместить:
jQuery("#NodesToMove").detach().appendTo('#DestinationContainerNode')
копия:
jQuery("#NodesToMove").appendTo('#DestinationContainerNode')
обратите внимание на использование .отсоединять.)( При копировании будьте осторожны, чтобы не дублировать идентификаторы.
если div
где вы хотите поместить свой элемент имеет содержимое внутри, и вы хотите, чтобы элемент показывал после основное содержание:
$("#destination").append($("#source"));
если div
где вы хотите поместить свой элемент имеет содержимое внутри, и вы хотите показать элемент до основное содержание:
$("#destination").prepend($("#source"));
если div
где вы хотите поместить свой элемент пуст, или вы хотите заменить это полностью:
$("#element").html('<div id="source">...</div>');
если вы хотите дублировать элемент перед любым из вышеперечисленных:
$("#destination").append($("#source").clone());
// etc.
о JavaScript решение?
объявить фрагмент:
var fragment = document.createDocumentFragment();
добавить нужный элемент к фрагмент:
fragment.appendChild(document.getElementById('source'));
добавить фрагмент к нужному элементу:
document.getElementById('destination').appendChild(fragment);
Вы можете использовать:
Вставить После
jQuery("#source").insertAfter("#destination");
чтобы вставить внутри другого элемента,
jQuery("#source").appendTo("#destination");
когда-либо пробовал простой JavaScript... destination.appendChild(source);
?
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>
вы можете использовать следующий код для перемещения источника в пункт назначения
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>
если вы хотите быструю демонстрацию и более подробную информацию о том, как вы перемещаете элементы, попробуйте эту ссылку:
http://html-tuts.com/move-div-in-another-div-with-jquery
вот краткий пример:
для перемещения над элементом:
$('.whatToMove').insertBefore('.whereToMove');
для перемещения после элемента:
$('.whatToMove').insertAfter('.whereToMove');
для перемещения внутри элемента, над всеми элементами внутри этого контейнера:
$('.whatToMove').prependTo('.whereToMove');
для перемещения внутри элемент, после всех элементов внутри этого контейнера:
$('.whatToMove').appendTo('.whereToMove');
старый вопрос, но попал сюда, потому что мне нужно переместить содержимое из одного контейнера в другой включая всех слушателей событий.
jQuery не имеет способа сделать это, но стандартная функция DOM 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
вы также можете попробовать:
$("#destination").html($("#source"))
но это полностью перезапишет все, что у вас есть в #destination
.
Я заметил огромную утечку памяти и разницу в производительности между insertAfter & after или insertBefore & before .. Если у вас есть тонны элементов DOM или вам нужно использовать after() или before() внутри события MouseMove, память браузера, вероятно, увеличится, и следующие операции будут выполняться очень медленно. Решение, которое я только что испытал, - использовать inserBefore вместо before () и insertAfter вместо after ().
для полноты картины существует другой подход wrap()
или wrapAll()
упомянутые в в этой статье. Таким образом, вопрос OP может быть решен этим (то есть, если предположить <div id="destination" />
еще не существует, следующий подход создаст такую обертку с нуля - ОП не было ясно, существует ли обертка уже или нет):
$("#source").wrap('<div id="destination" />')
// or
$(".source").wrapAll('<div id="destination" />')
звучит многообещающе. Однако, когда я пытался сделать $("[id^=row]").wrapAll("<fieldset></fieldset>")
на несколько вложенных структура такая:
<div id="row1">
<label>Name</label>
<input ...>
</div>
он правильно обертывает те <div>...</div>
и <input>...</input>
но как-то опускает <label>...</label>
. Поэтому я в конечном итоге использовал explicit . Итак, YMMV.