Как я могу получить все содержимое div и добавить его в другой div?

Question

У меня есть 2 div.

div1 и div2. Я хочу получить весь контент из div1 и добавить его в div2, а затем fadeOut div1.

Я пытался:

$('#div1').append('#div2');
$('#div1').fadeOut();

или

$('#div1').appendTo('#div2');
    $('#div1').fadeOut();

и

$('#div1').html('#div2');
$('#div1').fadeOut();

но, похоже, никто не работает для меня.

Что я не так делаю?

Answer 1

Проблема с методами .html() заключается в том, что он преобразует элементы DOM в HTML и наоборот. Вы потеряете все обработчики событий и данные, связанные с этими элементами.

Используйте .contents() ^{[документы]} вместо:

$("#div1").contents().appendTo('#div2').end().fadeOut();

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

$("#div1").clone(true, true).contents().appendTo('#div2');
$("#div1").fadeOut();

---

Всегда полезно читать документацию, когда вы используете методы. Э.Г.

$('#div1').append('#div2');

добавит строку #div2 к элементу с идентификатором div1. В документации написано:

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

и

content : элемент DOM, строка HTML или объект jQuery для вставки в конце каждого элемента в наборе соответствующих элементов.

Аналогично для $('#div1').html('#div2');:

htmlString : строка HTML, устанавливаемая в качестве содержимого каждого соответствующего элемента.

Он просто заменит содержимое #div1 на строку '#div2'.

С другой стороны

$('#div1').appendTo('#div2');

добавит элемент с идентификатором div1 к элементу с идентификатором div2:

Вставить каждый элемент в наборе соответствующих элементов до конца цели.

Документация jQuery довольно хорошая, рекомендую прочитать.

Answer 2

Вы можете получить HTML-код #div1 и добавить его к #div2:

$("#div2").append($("#div1").html());
$('#div1').fadeOut();

Вот рабочий пример .

Обратите внимание, что это похоже на ваш третий пример, который не сработал, поскольку метод html берет строку и добавляет ее к выбранным элементам. В вашем случае это просто добавит строковый литерал "# div2". Вам необходимо получить HTML-код, который вы хотите добавить из #div1, и добавить его.

Также обратите внимание, что fadeOut просто скрывает элемент (устанавливает display:none) и не удаляет его из DOM. Я не уверен, хочешь ты этого или нет.

Answer 3

content = $('#div1').html();
$('#div2').append(content);
$('#div1').fadeOut();

Answer 4

Это небольшой пример для размещения этого текста ниже как HTML

<div id="div1">
    <p>hi</p>
</div>
<div id="div2"></div>

и сценария ниже

$("#div2").append($("#div1").html());
$('#div1').fadeOut();

Answer 5

$('#div2').html($('#div2').html());

должно работать.