时间戳

首页 > 解决方案 > 如何在没有 ID 的情况下将项目添加到无序列表？

javascript - 如何在没有 ID 的情况下将项目添加到无序列表？

问题描述

我有以下 HTML 代码，它位于预先存在的页面上，无法直接编辑（我没有对索引文件的编辑权限）。但是，Web 应用程序允许我将 HTML 容器添加到页面，这允许我通过将 html/css/javascript 添加到这些独立容器对象来间接更改现有的 css/html。

<div class="mst-dropdown-content" style="max-height: 340px;">
  <div class="ToCDropdownMenuContainerContent">
    <ul class="mst-ArrowNavigableList">
      <li class="menu-level-1">
        <a class="focusable" role="menuitem" aria-label="Home" href="XXXX">
          <div class="menuText">Home</div>
        </a>
      </li>
      <li class="menu-level-2 selected">
        <a class="focusable" role="menuitem" aria-label="Home, current page" href="XXXXX">
          <div class="menuText">Main</div>
        </a>
      </li>
      <li class="menu-level-2">
        <a class="focusable" role="menuitem" aria-label="Sales" href="XXXXX">
          <div class="menuText">Sales</div>
        </a>
      </li>
      <li class="menu-level-2">
        <a class="focusable" role="menuitem" aria-label="Dashboard" href="XXXXX">
          <div class="menuText">Dashboard</div>
        </a>
      </li>
    </ul>
  </div>
</div>

我的目标是在这个预先存在的列表中添加一个额外的行项目，但我所做的每一次尝试都被证明是不成功的。

我认为这样的事情可能会奏效，但不幸的是，我试图操作的列表没有 ID，因此我很难弄清楚如何定位所述列表。另请注意，只有一个对象具有“ToCDropdownMenuContainerContent”类，因此出于所有意图和目的，可用于帮助定位列表。请注意，页面上还有另一个具有“mst-ArrowNavigableList”类的对象。

（只是在这里介绍一下自己：最终用户被指示使用最新版本的 Chrome 或 IE）。

标签： javascripthtml

解决方案

我假设您使用的是纯 JavaScript。

  1. 您可以使用document.querySelector选择ulwithmst-ArrowNavigableList类。

  2. 使用 和创建li元素document.createElement，并.innerHTML在li.

  3. 最后，用于.appendChild添加到列表的末尾。

工作示例：

function Add() {
  var element = document.querySelector(".mst-ArrowNavigableList");
  var child = document.createElement("li");
  child.innerHTML = '<a class="focusable" role="menuitem" aria-label="Dashboard" href="XXXXX"><div class = "menuText" > New Item</div></a>';
  element.appendChild(child);
}
<div class="mst-dropdown-content" style="max-height: 340px;">
  <div class="ToCDropdownMenuContainerContent">
    <ul class="mst-ArrowNavigableList">
      <li class="menu-level-1">
        <a class="focusable" role="menuitem" aria-label="Home" href="XXXX">
          <div class="menuText">Home</div>
        </a>
      </li>
      <li class="menu-level-2 selected">
        <a class="focusable" role="menuitem" aria-label="Home, current page" href="XXXXX">
          <div class="menuText">Main</div>
        </a>
      </li>
      <li class="menu-level-2">
        <a class="focusable" role="menuitem" aria-label="Sales" href="XXXXX">
          <div class="menuText">Sales</div>
        </a>
      </li>
      <li class="menu-level-2">
        <a class="focusable" role="menuitem" aria-label="Dashboard" href="XXXXX">
          <div class="menuText">Dashboard</div>
        </a>
      </li>
    </ul>
    <button onclick="Add()">Add</button>
  </div>
</div>

推荐阅读