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＃ menu-item-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＆gt;一个
和
最后
以持续LI＆gt;一个

纯粹JS的所有想法，任何想法，再次指出我不知道它会有多少李:(

如果我知道如何编写JS我会编写代码，但我不知道从哪里开始：（

Answer 1

您可以使用querySelectorAll()选择所有li元素，然后使用for循环检查其上一个或第一个li元素，并使用{{1}添加HTML }。

＆＃13;

insertAdjacentHTML

＆＃13;

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>');
  }
}

＆＃13;

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>

追加上一个和第一个元素纯javascript？

2 个答案: