Tôi có thể nối thêm một div đã tồn tại đến một div đã tồn tại khác không?

Question

Tôi có một biểu mẫu liên hệ trong một div trên biểu mẫu riêng của nó với độ mờ là 0 và một div nơi nội dung được điều khiển động tùy thuộc vào những gì người dùng nhấp vào menu. Sau khi người dùng đến giai đoạn cuối của menu tôi cần xóa nội dung của div hiển thị mọi thứ và sau đó "di chuyển" div biểu mẫu vào đó, sẽ giống như công việc này?

$('#menu_form').on('click', function() { 
    $('#form_div').append('#display_div'); 
}); 

Vì vậy, để tóm tắt lại các div đã tồn tại, cần đặt một trong số chúng vào nhau khi nhấp chuột.

Answer 1

Bạn có thể sử dụng: .appendTo() phương pháp:

$('#menu_form').on('click', function(){ 
    $('#form_div').appendTo('#display_div'); // appendTo -> selector 
}); 

hoặc bạn có thể sử dụng phương pháp .append():

$('#menu_form').on('click', function(){ 
    $('#display_div').append($('#form_div')); // append -> object 
}); 

Answer 2

Kiểm tra this jsFiddle cho một POC nhanh chóng. Rõ ràng là vậy.

Bí quyết là để vượt qua tham chiếu đối tượng, không chỉ là đối tượng id, như vậy:

$('#menu_form').on('click', function(){ 
    $('#form_div').append($('#display_div')); 
}); 

Bạn cũng có thể vượt qua các đối tượng hiện tại, sử dụng this:

$('#menu_form').on('click', function(){ 
    $('#form_div').append(this); 
});