循环向Bootstrap下拉菜单追加li元素不生效如何解决

你的代码不生效的核心原因是jQuery选择器写错，没有匹配到实际的下拉菜单容器。
你写的选择器$('.dropdown-menu ul')匹配的是「class为dropdown-menu的元素内部嵌套的ul标签」，但你的页面结构里，带dropdown-menu类的标签本身就是承载菜单项的ul容器，它内部没有嵌套额外的ul，所以这个选择器拿到的是空对象，所有append操作都没有作用到实际DOM上。
另外如果你的JS代码写在DOM结构之前，没有做DOM加载完成的监听，也会出现选不到元素的问题。

• 把错误的选择器替换为$('.dropdown-menu')，直接选中下拉菜单的ul容器
• 把循环追加逻辑放在DOM加载完成的回调里执行，避免DOM未渲染就执行选择操作
• （可选优化）给下拉项的a标签加上空href属性，避免默认样式、交互异常

修复后的JS代码如下：

// DOM加载完成后执行逻辑
$(function() {
  for (var i = 0; i < 5; i++) {
    console.log(i)
    $('.dropdown-menu').append(`<li><a class="dropdown-item" href="#">test ${i}</a></li>`)
  }
})

替换原有JS代码后刷新页面，就能看到下拉菜单内正常生成5个带对应序号的菜单项。

内容的提问来源于stack exchange，提问作者seriously