jquery - .insertBefore() is not a function javascript -

so have page , upon click button, opens nested field , want hide 1 of div in filed upon click far function doesnt work.

my js file

$('body').on('click', '#main-applicant-btn', function() {      event.stoppropagation();     var prependdata = $('.main-applicant').children().first().clone();     prependdata.find("div.checkbox").replacewith( $( "div.checkbox.hide" ));     var prependeddata = $('.main-applicant').children().last();     var list = document.getelementsbyclassname("main-applicant");     list.insertbefore(prependdata, prependeddata);   }) 

my applicant.html.erb file

<div class="form-group">         <%= f.link_to_add "", :applicant_commitments, :class => "glyphicon glyphicon-plus-sign pointer add", :id => "main-applicant-btn", :data => {:target => "#main-applicant-#{rand}"} %>       </label>     </div>     <span id="main-applicant-<%= rand %>" class="main-applicant">           <%= f.simple_fields_for :applicant_commitments |applicant_commitment| %>             <%= render "existing_commitment_fields", {:f => applicant_commitment, :instalment => true, :type => 'existing_commitment_applicant'} %>           <% end %>         </span> 

my nested field existing_commitment_fields.html.erb

 <div class="form-group monthly-instalment-lender-checkbox">       <div class="col-sm-3" id="checkbox-existing-fields">           <div class="checkbox">             <label>               <span>joint name</span>               <%= f.input_field :joint_name, as: :boolean, class: "joint-name-commitment" %>             </label>           </div>         </div>      </div> 

so upon click want main-applicant-btn , when displays nested_fields, hide div.checkbox far when try code, error .insertbefore() not function.

anyone has clues on how append or force javascript run code after has loaded?

insertbefore node method.
document.getelementsbyclassname() method returns htmlcollection.

you've got iterate through htmlcollection or pick 1 of elements inside touch nodes , use method :

list[0].insertbefore(...,...)

also, mentioned @nnnnnn, "the insertbefore() method isn't expecting jquery objects arguments.".
either use plain javascript methods document.queryselector('') or call target of jquery object ($(...)[0])