Câu hỏi Làm thế nào để di chuyển một phần tử vào một phần tử khác?


Tôi muốn di chuyển một phần tử DIV bên trong một phần tử khác. Ví dụ, tôi muốn di chuyển này (bao gồm tất cả trẻ em):

<div id="source">
...
</div>

vào điều này:

<div id="destination">
...
</div>

để tôi có điều này:

<div id="destination">
  <div id="source">
    ...
  </div>
</div>

1432
2017-08-14 20:14


gốc


Chỉ cần sử dụng $ (target_element) .append (to_be_inserted_element); - Mohammad Areeb Siddiqui
Hoặc: destination.appendChild (nguồn) sử dụng javascript đơn giản - luke
chúng ta có thể đạt được điều này bằng cách sử dụng CSS? điều đó có thể không ? - RajKumar Samala
@RajKumarSamala CSS không thể thay đổi cấu trúc của HTML, chỉ trình bày của nó. - Mark Richman


Các câu trả lời:


Bạn có thể muốn sử dụng appendTo chức năng (thêm phần cuối của phần tử):

$("#source").appendTo("#destination");

Hoặc bạn có thể sử dụng prependTo chức năng (thêm phần đầu của phần tử):

$("#source").prependTo("#destination");

Thí dụ:

$("#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>


1581
2017-08-14 20:16



Một cảnh báo rằng điều này có thể không hoạt động chính xác trong jQuery mobile, vì nó có thể tạo một bản sao của phần tử thay thế. - Jordan Reiter
hiện appenĐể tạo một bản sao hoặc thực sự di chuyển toàn bộ div đến đích? (bởi vì nếu nó sao chép, nó sẽ tạo ra erros khi gọi div bởi id) - Hadrian
Đây là một bài viết tuyệt vời về loại bỏ, thay thế và di chuyển các yếu tố trong jQuery: elated.com/articles/jquery-removing-replacing-moving-elements - xhh
Lưu ý tài liệu jQuery cho appendTo cho biết phần tử được di chuyển: it will be moved into the target (not cloned) and a new set consisting of the inserted element is returned - - api.jquery.com/appendto - John K
Bạn không di chuyển nó, chỉ cần phụ thêm. Câu trả lời dưới đây thực hiện một MOVE phù hợp. - Aaron


giải pháp của tôi:

MOVE:

jQuery("#NodesToMove").detach().appendTo('#DestinationContainerNode')

BẢN SAO:

jQuery("#NodesToMove").appendTo('#DestinationContainerNode')

Lưu ý việc sử dụng .detach (). Khi sao chép, hãy cẩn thận rằng bạn không sao chép ID.


780
2017-11-06 01:50



Tạo một JSFiddle cho giải pháp này: jsfiddle.net/Pixic/8VrdE - Pixic
Câu trả lời hay nhất. Câu trả lời được chấp nhận tạo bản sao, không di chuyển phần tử như câu hỏi yêu cầu. - paulscode
Xin lỗi, nhưng câu trả lời được chấp nhận của Andrew Hare là chính xác - việc tách rời là không cần thiết. Hãy thử nó trong JSFiddle của Pixic ở trên - nếu bạn loại bỏ các cuộc gọi tách nó hoạt động giống hệt nhau, tức là nó di chuyển, KHÔNG phải là bản sao. Đây là ngã ba chỉ với một thay đổi: jsfiddle.net/D46y5  Như được ghi trong API: api.jquery.com/appendTo : "Nếu một phần tử được chọn theo cách này được chèn vào một vị trí duy nhất ở nơi khác trong DOM, nó sẽ được chuyển vào đích (không nhân bản) và một tập mới bao gồm phần tử được chèn được trả về" - John - Not A Number
@ John-NotANumber là đúng - tách () là không cần thiết ở đây. Câu trả lời được chấp nhận là tốt nhất, bạn chỉ cần thực sự đọc tài liệu đúng cách. - LeonardChallis
Tài liệu appendTo cũng nói: "Nếu có nhiều hơn một phần tử đích, các bản sao nhân bản của phần tử chèn vào sẽ được tạo cho mỗi mục tiêu sau lần đầu tiên, và bộ mới (phần tử gốc cộng với bản sao) được trả về." Vì vậy, trong trường hợp chung, giải pháp này cũng có thể tạo bản sao! - Vincent Pazeller


Tôi vừa mới sử dụng:

$('#source').prependTo('#destination');

Mà tôi nắm lấy từ đây.


104
2017-07-24 18:51



Vâng, tách ra là hữu ích khi bạn muốn giữ nguyên tố và lắp lại sau này, nhưng trong ví dụ của bạn, bạn hãy lắp lại nó ngay lập tức. - Tim Büthe
Tôi sợ rằng tôi không hoàn toàn lúng túng những gì bạn đang nhận được, bạn có thể cung cấp mã mẫu? - kjc26ster
Ý tôi là, prependTo, tách phần tử khỏi vị trí ban đầu của nó và chèn nó vào cái mới. Các chức năng tách mặt khác chỉ cần detaches phần tử được chọn và bạn có thể lưu nó trong một biến để chèn nó vào DOM tại một thời điểm sau này trong thời gian. Vấn đề là, cuộc gọi tách rời của bạn là không cần thiết. Loại bỏ nó và bạn sẽ đạt được hiệu quả tương tự. - Tim Büthe


Nếu div nơi bạn muốn đưa phần tử của bạn có nội dung bên trong và bạn muốn phần tử hiển thị sau nội dung chính:

  $("#destination").append($("#source"));

Nếu div nơi bạn muốn đặt phần tử của bạn có nội dung bên trong và bạn muốn hiển thị phần tử trước nội dung chính:

$("#destination").prepend($("#source"));

Nếu div nơi bạn muốn đặt phần tử của mình trống hoặc bạn muốn thay thế nó hoàn toàn:

$("#element").html('<div id="source">...</div>');

Nếu bạn muốn sao chép một phần tử trước bất kỳ phần nào ở trên:

$("#destination").append($("#source").clone());
// etc.

81
2017-11-15 20:04



Bạn không thể sử dụng bộ chọn với .append(). Nếu bạn sử dụng một chuỗi làm đối số, nó sẽ thêm "#other_element" vào phần tử. - Phil Bozak
@PhilBozak cũng yep sai lầm của tôi :), nếu bạn muốn tự do chỉnh sửa - sbaaaang
Tôi đang tìm tất cả các chữ đậm một chút khó đọc, nhưng đây là câu trả lời thông tin nhất, vì vậy nó được upvote của tôi. - Michael Scheper


Thế còn một JavaScript dung dịch?

Khai báo một đoạn:

var fragment = document.createDocumentFragment();

Nối phần tử mong muốn vào phân đoạn:

fragment.appendChild(document.getElementById('source'));

Nối đoạn vào phần tử mong muốn:

document.getElementById('destination').appendChild(fragment);

Kiểm tra nó ra.


66
2018-06-24 10:43



Tại sao sử dụng createDocumentFragment thay vì đơn giản document.getElementById ('destination'). AppendChild (document.getElementById ('source'))? - Gunar C. Gessner
@ GunarC.Gessner giả sử bạn cần phải sửa đổi đối tượng nguồn trước khi thêm nó vào đối tượng đích, sau đó cách tiếp cận tốt nhất là sử dụng phân mảnh là đối tượng ảo và không phải là một phần của cây DOM, bạn sẽ có hiệu suất tốt hơn khi sửa đổi đối tượng nguồn khi nó đã được chuyển đổi từ vị trí ban đầu của nó (bây giờ nó nằm bên trong đoạn) thay vì sửa đổi nó ở vị trí ban đầu của nó trước khi gắn nó. - Ali Bassam
Tôi muốn thêm cho sự liên quan của việc cung cấp một giải pháp tinh khiết JavaScript. Không nên giả sử jQuery luôn được sử dụng - Alexander Fradiani
Câu hỏi: Khi phụ thêm nút con, chúng ta có bị mất các sự kiện đính kèm không? - jimasun
Câu trả lời cho câu hỏi của tôi là có, nó giữ các sự kiện đính kèm. - jimasun


Bạn có thể dùng:

Để chèn sau,

jQuery("#source").insertAfter("#destination");

Để chèn vào bên trong một phần tử khác,

jQuery("#source").appendTo("#destination");

27
2018-05-02 13:53





Đã từng thử JavaScript đơn giản ... 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>


18
2017-11-02 08:49



* ai đó đã bắt đầu sự kiện toàn cầu  onclick của đoạn trích giới thiệu với từ khóa var trong nỗ lực của mình để tăng cường bài đăng - nhưng điều đó sai! - Bekim Bacaj
Thật ngạc nhiên khi mọi người vẫn nghĩ jQuery bằng JavaScript. Không cần jQuery nữa vào năm 2017, thực sự. - nbrogi