How to move HTML element

Question

How to move HTML element to another element. Note that, I don't mean moving element's position. Consider this HTML code:

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

I want to move "to_be_moved" to "target" so "target" has child "to_be_moved" now. So the result should be like this:

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

I've searched in google (especially using prototype framework) but all I've got is moving position, not as I want. Thanks before.

Answer 1

Assuming you're working with native DOM elements, the Javascript method .appendChild will suit your needs.

In native Javascript, document.getElementByID is probably your best bet in getting the DOM element, so...

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

Answer 2

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

Or, for a more readable way...

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

Answer 3

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