jQuery insertAfter() не работает должным образом

Question

Я пытаюсь взять #filters и все его содержимое и вставить его после в следующую структуру:

<div id = "top-level">

  <div id = "sub-level-1">
    <div class = "another-level">
      <div class = "last-level">
        <nav class = "nav-menu"></nav>
        <!-- insert #filters here -->
      </div>
    </div>
  </div>

  <aside>
    <div id = "filters"> 
      <div id = "filters-form">
        <div class = "more-contents"></div>
      </div>
    </div> 
  <aside>

</div>

К сожалению, я не могу заставить его работать как положено. Кажется, он не может "найти" .nav-меню и вставить его после, хотя я могу вставить его после элементов более высокого уровня.

// this works
var filters = $("#filters");
filters.insertAfter("#sub-level-1");

// doesn't work
var filters = $("#filters");
filters.insertAfter(".nav-menu");

Кто-нибудь может помочь?

Answer 1

Я переработал это и заставил это работать. Имейте в виду, что я вставил какой-то текст только для того, чтобы я мог легко проверить элементы.

var filters = $("#filters");
filters.insertAfter(".nav-menu");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "top-level">
  <div id = "sub-level-1">
    <div class = "another-level">
      <div class = "last-level">
        <nav class = "nav-menu">bbb</nav>
        <!-- insert #filters here -->
      </div>
    </div>
  </div>
  <aside>
    <div id = "filters"> 
      <div id = "filters-form">
        <div class = "more-contents">aaa</div>
      </div>
    </div> 
  </aside>
</div>

Одно редактирование, которое я сделал, было то, что у вас не было закрывающего тега, только два открывающих тега, поэтому я исправил это.