Question

我正在编写一个脚本，为菜单添加一些额外的功能。当前用户菜单是一个下拉列表，其中包含我的个人资料，我的报告等链接。我正在寻找另一个项目“我的帖子”。

由于网站的运作方式，我遇到了一些困难。

这是下拉列表的代码：

<li class="user expandable">
    *list items*
</li>

我正在使用document.getElementById来获取元素，但不知道如何获取列表并向其中添加项目。我相信还有其他元素选择器，例如class，但它们似乎也没有用。

Answer 1

我认为这与你正在寻找的东西相似：

＆＃13;

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#btn2").click(function(){
        $(".user").append("<li>Appended item</li>");
    });
});
</script>
</head>
<body>

<ol class="user expandable">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>
<button id="btn2">Append list item</button>

</body>
</html>

＆＃13;

Answer 2

$( "li" ).hover(
  function() {
    $( this ).append( $( hfhfhfha ) );
  }
);

＆＃34;这＆＃34;关键字为您提供所需的参考。

Answer 3

当没有ID
时，使用JS将项目添加到html列表中

要获取第一个找到的项目document.querySelector，请使用css选择器（例如document.querySelector('div')）查找第一个div或document.querySelector('.user')以查找具有类用户的第一个元素

获取匹配document.querySelectorAll的所有项目，这将返回所有匹配项目的数组。

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

const list = document.querySelector('.user.expandable');

function addMyNewRow(message, index = 0) {
  const node = document.createElement('li');
  node.innerHTML = message
  list.insertBefore(node, list.childNodes[index]);
}

function addChild() {
  addMyNewRow('clicked and added in first');
}

addMyNewRow("added in second", 2)

<ul class="user expandable">
  <li>old list item</li>
  <li>old list item</li>
  <li>old list item</li>
  <li>old list item</li>
</ul>

<button onclick="addChild()">add list </button>

当没有ID时，使用JS将项添加到html列表

3 个答案: