javascript - Jquery - having to add surplus [0] to Jquery objects -

i've come across problem several times, , @ first tried ignore it. have select element:

html:

<div class="col-sm-10">     <select class="form-control input-sm" id="my_select" name="contracting_party_legal_entity">     </select> </div> 

now want, say, populate select programmatically options. looks should use $('#my_select').appendchild($option) achieve this, no! unless write $('#my_select')[0].appendchild($option), error appendchild not function. why reason necessity use surplus [0] ? smth wrong syntax ?

$ jquery function. returns array of matching elements.

therefore select particular element need choose index of array.

you may use $('#my_select').get(0).appendchild($option) , appendchild vanilla javascript function works on element not on jquery object. try jquery append function.

example of jquery append function:

$("#test").append("<option>hello</option>")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <select id="test">    <option>select box</select>  </select>