追加最后和第一个元素纯javascript？

Question

我有一些菜单，这将是像这样的HTML

<ul class="main-menu menu-bees" id="menu-main-menu" data-menu-width="1112"> 
     <!-- rowTpl --> 
     <li class="menu-item bees-start active" id="menu-item-0"> 
      <a href="#"> 
       MENU 1 
       <div class="canvas_wrapper"> 
        <canvas class="menu_dashed" height="64" width="501"></canvas> 
       </div> 
      </a> 
      <span class="button_open"></span> 

     </li> 
     <!-- rowTpl --> 
     <li class="menu-item" id="menu-item-1"> 
      <a href="#"> 
       MENU 2 
       <div class="canvas_wrapper"> 
        <canvas class="menu_dashed" height="64" width="501"></canvas> 
       </div> 
      </a> 
      <span class="button_open"></span> 

     </li> 
     <!-- rowTpl --> 
     <li class="menu-item" id="menu-item-2"> 
      <a href="#"> 
       MENU 3 
       <div class="canvas_wrapper"> 
        <canvas class="menu_dashed" height="64" width="501"></canvas> 
       </div> 
      </a> 
      <span class="button_open"></span> 
     </li> 
    </ul> 

我需要的是追加一些HTML，ID＃菜单项-XXX将始终计数和阵列添加从开始元素的个数0. 我不能使用Jquery，我需要纯JS做这件事，那就是我需要一些额外的HTML在第一个LI > A和最后，我不知道它会有多少，但总是要追加最后。 当我附上HTML时，它必须看起来像这样

<ul class="main-menu menu-bees" id="menu-main-menu" data-menu-width="1112"> 
     <!-- rowTpl --> 
     <li class="menu-item bees-start active" id="menu-item-0"> 
      <a href="#"> 
       **<p>FIRST</p>** 
       MENU 1 
       <div class="canvas_wrapper"> 
        <canvas class="menu_dashed" height="64" width="501"></canvas> 
       </div> 
      </a> 
      <span class="button_open"></span> 

     </li> 
     <!-- rowTpl --> 
     <li class="menu-item" id="menu-item-1"> 
      <a href="#"> 
       MENU 2 
       <div class="canvas_wrapper"> 
        <canvas class="menu_dashed" height="64" width="501"></canvas> 
       </div> 
      </a> 
      <span class="button_open"></span> 

     </li> 
     <!-- rowTpl --> 
     <li class="menu-item" id="menu-item-2"> 
      <a href="#"> 
       **<p>LAST</p>** 
       MENU 3 
       <div class="canvas_wrapper"> 
        <canvas class="menu_dashed" height="64" width="501"></canvas> 
       </div> 
      </a> 
      <span class="button_open"></span> 
     </li> 
    </ul> 

这意味着我需要添加：

首先

先LI>一个
和

LAST

去年LI>一

所有由纯JS，任何想法，再算我不知道有多少李将是:(

如果我知道如何写JS我会做一个代码，但我不知道从哪里开始:(

Answer 1

您可以使用querySelectorAll()选择所有li元素，然后用for循环来检查，如果其最后或第一li元素并添加HTML insertAdjacentHTML。

var li = document.querySelectorAll('#menu-main-menu li'); 
 
for (var i = 0; i < li.length; i++) { 
 
    if (i == 0) { 
 
    li[i].querySelector('a').insertAdjacentHTML('afterbegin', '<p>FIRST</p>'); 
 
    } 
 

 
    if (i == (li.length - 1)) { 
 
    li[i].querySelector('a').insertAdjacentHTML('afterbegin', '<p>LAST</p>'); 
 
    } 
 
}

<ul class="main-menu menu-bees" id="menu-main-menu" data-menu-width="1112"> 
 
    <!-- rowTpl --> 
 
    <li class="menu-item bees-start active" id="menu-item-0"> 
 
    <a href="#"> 
 
       MENU 1 
 
       <div class="canvas_wrapper"> 
 
        <canvas class="menu_dashed" height="64" width="501"></canvas> 
 
       </div> 
 
      </a> 
 
    <span class="button_open"></span> 
 

 
    </li> 
 
    <!-- rowTpl --> 
 
    <li class="menu-item" id="menu-item-1"> 
 
    <a href="#"> 
 
       MENU 2 
 
       <div class="canvas_wrapper"> 
 
        <canvas class="menu_dashed" height="64" width="501"></canvas> 
 
       </div> 
 
      </a> 
 
    <span class="button_open"></span> 
 

 
    </li> 
 
    <!-- rowTpl --> 
 
    <li class="menu-item" id="menu-item-2"> 
 
    <a href="#"> 
 
       MENU 3 
 
       <div class="canvas_wrapper"> 
 
        <canvas class="menu_dashed" height="64" width="501"></canvas> 
 
       </div> 
 
      </a> 
 
    <span class="button_open"></span> 
 
    </li> 
 
</ul>

Answer 2

这样的事情应该工作。

<script> 
     var menu = document.getElementById('menu-main-menu'); 
     var items = menu.getElementsByTagName('li'); 
     var len = items.length; 

     for (i = 0; i < len; ++i) { 
      var li = items[i]; 
      li.setAttribute('id', 'menu-item-' + i); 

      if (i === 0) { 
       console.log('innerHTML: ' + li.innerHTML) 
       li.innerHTML = '**<p>FIRST</p>**' + li.innerHTML; 
      } else if (i === (len - 1)) { 
       li.innerHTML = '**<p>LAST</p>**' + li.innerHTML; 
      } 
     } 
    </script>