在兩個現有元素之間添加一個新元素

Question

我使用wordpress，我想以自定義方式在現有菜單之間添加新元素。

第一個具有.btx-navbar-header類，第二個具有

#menu-main-menu

這是我嘗試過的方法：

.btx-navbar-header + #menu-main-menu::before {
    content: '<a href="www.google.com">Google it!</a>';
    display: block;
}

但是，超鏈接不起作用。 有什么辦法可以使其工作？ 另外，使用display:block可使第二個元素轉到頁面的下一行。

菜單源示例。

    <ul id="menu-main-menu" class="btx-navbar-nav btx-menu">
  <li id="menu-item-144" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-99 current_page_item menu-item-144"><a href="">Home</a></li>
  <li id="menu-item-160" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-160"><a href="">test3</a></li>
  <li id="menu-item-112" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-112"><a href="">Test2</a></li>
  <li id="menu-item-115" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-115"><a href="">test8</a></li>
  <li id="menu-item-140" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-140"><a href="">Contact</a></li>
  <li id="menu-item-141" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-141"><a href="">Tset5</a></li>
  <li id="menu-item-142" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-142"><a href="">Tset4</a></li>
  <li id="menu-item-143" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-143"><a href="">test0</a></li>
  <li class="btx-menu-search"><a href="#" class="js-menu-search"><i class="twf twf-search"></i></a>
    <div class="btx-navbar-search btx-p-bg-bg btx-s-text-color"><span class="btx-close-button twf twf-ln-cross"></span>
      <form class="btx-search-form" role="search" method="get" action=""><span class="btx-search-form-title twf twf-search"></span><input type="text" placeholder="Search" value="" name="s" /></form>
    </div>
  </li>
</ul>

Answer 1

嘗試這樣的事情：

 <script>
 function addMenuItem(aText,aUrl,nextTo) {
     var menuItem = document.createElement("LI");
     var menuItemAnchor = document.createElement("A");
     var menuItemAnchorText = document.createTextNode(aText);
     menuItem.appendChild(menuItemAnchor);
     menuItemAnchor.appendChild(menuItemAnchorText);
     menuItemAnchor.href = aUrl;
     var ref = document.querySelector(nextTo);
     ref.parentNode.insertBefore(menuItem, ref.nextSibling);
 }

 // This is when you call the function and give it a URL and the text for the menu. Also you specify after which LI should it append the new menu item
 addMenuItem('Google It!','http://www.google.com','li.menu-item-144');

 </script>

稍后，您可以在菜單onClick，窗口加載或需要它的任何情況下添加更多項。 只需像這樣調用函數：

 addMenuItem('Button Title','Button URL','LI Class');  

讓我知道是否有幫助。 而且這不需要jQuery庫，因為這是純JS。