Using jquery, How can i stick a textbox inside a div and have it be the first element in the div?

Lets say I have this:

<div id="container">
  <span id=test></span>
  <span id=test2></span>
</div>

and I have a textbox somewhere else on the page

<input type="text" id='myTextbox" />

and I want to move the textbox so it shows up like this:

<div id="container">
  <input type="text" id='myTextbox" />
  <span id=test></span>
  <span id=test2></span>
</div>

I thought append would do it but that looks like it adds it to the end of the div


solution

First, fix your markup. You have single and double quotes in the following:

<input type="text" id='myTextbox" />

As for your question, use prepend():

$('#container').prepend($('#myTextbox'));

EXAMPLE HERE

Fixed markup..

<div id="container">
  <span id="test"></span>
  <span id="test2"></span>
</div>
<input type="text" id="myTextbox" />

It’s also worth noting that could use the textarea element as opposed to an input element: