在两个现有元素之间添加一个新元素

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。