.insertBefore（）不是javascript函数

因此，我有一个页面，点击按钮，它会打开一个嵌套字段，我想在点击后隐藏字段中的一个div，但到目前为止，我的函数不起作用

我的js文件

$('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 applicator.html.erb文件

<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 do |applicant_commitment| %>
            <%= render "existing_commitment_fields", {:f => applicant_commitment, :instalment => true, :type => 'existing_commitment_applicant'} %>
          <% end %>
        </span>

“glyphicon glyphicon加号指针添加”，：id=>“主申请人btn”，：data=>{:target=>“#主申请人-#{rand}”}%>
申请人承诺：分期付款=>true，：类型=>“现有申请人承诺”}%>

我的嵌套字段现有\u承诺\u 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>

联名

因此，单击后，我想转到

主申请者btn

，当它显示嵌套的_字段时，我将隐藏

div.checkbox

，但到目前为止，当我尝试此代码时，我得到了错误。insertBefore（）不是一个函数

有人知道如何在加载javascript后附加或强制javascript运行代码吗？

是一种节点方法。
方法返回一个

您必须迭代此HTMLCollection，或者选择其中一个元素来实际接触节点并使用其方法：

列表[0]。在（…，…）之前插入

另外，正如@nnnnnn所提到的，“insertBefore（）方法不希望jQuery对象作为参数。”。

因此，要么使用普通的javascript方法，如
document.querySelector（“”）
，要么调用jQuery对象的目标（
$（…）[0]
）
，
insertBefore（）
方法不希望jQuery对象作为参数。