Cách di chuyển phần tử HTML

Question

Cách di chuyển phần tử HTML sang phần tử khác. Lưu ý rằng, tôi không có nghĩa là vị trí của phần tử di chuyển. Hãy xem xét mã HTML này:

<div id="target"></div> 
<span id="to_be_moved"></span> 

Tôi muốn di chuyển "to_be_moved" sang "target" để "target" có con "to_be_moved" ngay bây giờ. Vì vậy, kết quả nên như thế này:

<div id="target"><span id="to_be_moved"></span></div> 

Tôi đã tìm kiếm trong google (đặc biệt là sử dụng khung nguyên mẫu) nhưng tất cả những gì tôi có là vị trí di chuyển, không phải như tôi muốn. Cam ơn trươc.

Answer 1

document.getElementById('target').appendChild( document.getElementById('to_be_moved')) 

Answer 2

Giả sử bạn đang làm việc với các phần tử DOM gốc, phương pháp Javascript .appendChild sẽ phù hợp với nhu cầu của bạn.

Trong javascript bản xứ, document.getElementByID có lẽ là lựa chọn tốt nhất của bạn trong việc có được phần tử DOM, vì vậy ...

var target = document.getElementById('target') 
document.getElementById('to_be_moved').appendChild(target) 

Answer 3

$("target").insert($("to_be_moved").remove()); 

Hoặc, một cách dễ đọc hơn ...

var moveIt = $("to_be_moved").remove(); 
$("target").insert(moveIt);