Перемещение содержимого DIV в другой DIV с помощью jQuery

http://www.frostjedi.com/terra/scripts/demo/jquery02.html

по данным этой ссылке элементы можно перемещать, выполняя $('#container1').функции append($('#container2')). К сожалению, это не работает на меня. Есть идеи?

9
javascript jquery

7 ответов

см. jsfiddle http://jsfiddle.net/Tu7Nc/1/

вы должны добавить не ваш div точно, но содержание вашего div (внутренний HTML) с jQuery .

HTML-код:

<div id="1">aaa</div>
<div id="2">bbb</div>​

Jquery:

$("#1").append($("#2").html());

результат:

aaabbb
bbb
10

лучше не использовать html().

я столкнулся с некоторыми проблемами из-за html-интерпретации содержимого как строки вместо узла DOM.

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

мне нужно было вложить содержимое DIV В ребенка, вот как я это сделал.

пример:

<div id="xy">
  <span>contents</span>
</div>

<script>
  contents = $("#xy").contents(); //reference the contents of id xy
  $("#xy").append('<div class="test-class" />'); //create div with class test-class inside id xy 
  $("#xy").find(">.test-class").append(contents); //find direct child of xy with class test-class and move contents to new div
</script>

[EDIT]

предыдущий пример работает, но вот более чистый и эффективный пример:

<script>
    var content = $("#xy").contents(); //find element
    var wrapper = $('<div style="border: 1px solid #000;"/>'); //create wrapper element
    content.after(wrapper); //insert wrapper after found element
    wrapper.append(content); //move element into wrapper
</script>
10

для перемещения содержимого div (id=container2) в другой div (id=container1) с помощью jquery.

$('#container2').contents().appendTo('#container1');
8

вы также можете сделать:

var el1 = document.getElementById('container1');
var el2 = document.getElementById('container2');
if (el1 && el2) el1.appendChild(el2);

или как одно утверждение, но не столь надежное:

document.getElementById('container1').appendChild(document.getElementById('container2'));

редактировать

по размышлении (несколько лет спустя...) кажется, что намерение состоит в том, чтобы переместить содержимое одного div в другой. Так это обычный ДШ:

var el1 = document.getElementById('container1');
var el2 = document.getElementById('container2');
if (el1 && el2) {
  while (el2.firstChild) el1.appendChild(el2.firstChild);
}

// Remove el2 if required
el2.parentNode.removeChild(el2);

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

4

$('#container1').append($('#container2').html())

1

Ну, это может быть альтернативой если вы хотите добавить:

document.getElementById("div2").innerHTML=document.getElementById("div2").innerHTML+document.getElementById("div1").innerHTML

Если вы хотите переписать содержимое:

document.getElementById("div2").innerHTML=document.getElementById("div1").innerHTML
0

Я предлагаю общий подход с функцией и jQuery:

function MoveContent(destId, srcId) {

    $('#' + destId).append($('#' + srcId).contents().detach());
}

содержимое отсоединенного узла источника добавляется к узлу назначения с вызовом:

MoveContent('dest','src');

первый параметр является идентификатором нового родительского узла (назначения), второй-идентификатором старого родительского узла (источника).

пожалуйста см. пример на:http://jsfiddle.net/dukrjzne/3/

0