Why does prepend method removes the HTML from where it actually was

Question

I am having a KeyBoard plugin, which I am trying to edit. So to change the Layout of the plugin, I wanted to make it to get the full screen covered. I am in the beginning of the process, so I thought of removing the HTML codes from the bottom and just pasting them right below the body element of the document. This way, I would make a use of the screen properties as well as the position property. Like this

$('#vboard').css('width', screen.width);
$('#vboard').css('position', 'absolute');

etc.

What I did

I used the prepend method, to append it to the top of the body element childs. Here is my code

var vbrd = $('#vboard');
/* Paste it inside the HTML directory */
$('body').prepend(vbrd);

What I expected

What I expected was, that it would just create a new Node (Child) of the body element, and would keep the HTML in the body element where it first belonged to. I am using ASP.NET Web Page, so every page gets created in

<div> <!-- Inside the body element -->
  <!--Here-->
</div>

What happened

What happened was something like this

What happened was, that it got appened to the body, as I was trying to do so. But at the same time, it removed the HTML nodes from the element where it was placed.

Is that expected? Because everywhere I search, it tells me to use .remove() method to remove the elements too. But in this scene it wasn't required.

Answer 1

That's the way it works in jQuery, the way it works in the bare DOM APIs, and the way it's documented by both. If you want to insert a copy rather than moving the original then use $('body').prepend(vbrd.clone());

Answer 2

Yes. It is expected.

Prepend puts the element where you tell it to put it, and the element can't be in two places at once.

It does not clone it. clone() does.