html - Inserting a DIV element before a specific LI

Question

I'd like to use javascript to change where a DIV appears

Full code:

<div id="et-top-navigation" data-height="94" data-fixed-height="73" style="padding-left: 107px;">
  <nav id="top-menu-nav">
    <ul id="top-menu" class="nav">
       <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-2 current_page_item menu-item-46"><a href="https://website.com/" aria-current="page">Home</a>
      </li>
      <li class="menu-item menu-item-type-post_type menu-item-object-post menu-item-45"><a href="https://website.com">Title 1</a>
      </li>
      <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-47"><a href="https://website.com">Title 2</a>
        <ul class="sub-menu">
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-289"><a href="https://website.com">Title 3</a>
          </li>
      </ul>
     </li>

     <li class="cta-button cta-anim menu-item menu-item-type-custom menu-item-object-custom menu-item-5400"><a href="https://website.com">Button</a>
     </li>
   </ul>                    
  </nav>
                
  <div id="et_top_search">
        <span id="et_search_icon"></span>
    </div>
                
</div>

I would like for

  <div id="et_top_search">
    <span id="et_search_icon"></span>
</div>

to appear before

<li class="cta-button cta-anim menu-item menu-item-type-custom menu-item-object-custom menu-item-5400"><a href="https://website.com">Button</a>
 </li>

Many thanks for your help in advance!

question from:https://stackoverflow.com/questions/65644693/inserting-a-div-element-before-a-specific-li

Answer 1

You can easily do this by the following JS code:

var parent_div = document.getElementById("et-top-navigation");
div_elem = parent_div.lastChild;
var parent_li = document.getElementByID("top-menu");
parent_li.insertBefore(div_elem, parent_li.lastChild);
div_elen.remove()

You will understand the code easily.