如何在含子元素的li标签内a标签后插入HTML？代码无效求助

咱们直接说问题和解决办法哈：

核心问题拆解 #

你的代码没生效主要是两个小细节出错了：

1. jQuery库加载顺序搞反了：你把自己的业务代码写在了引入jQuery库的标签前面，浏览器执行代码时$还没被定义，代码直接跑不起来；
2. 查找a标签的方法用错了：this.closest('a')是找当前元素的祖先节点，但你的<a>是<li>的子元素，不是祖先，所以根本找不到目标a标签。

修正后的完整代码 #

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Menu Test</title>
    <!-- 先引入jQuery库，再写业务代码 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $(function() {
            $("li ul").hide();
            $("li").each(function() {
                // 检查当前li是否包含直接子元素ul
                var hasSubMenu = $(this).children("ul").length > 0;
                if (hasSubMenu) {
                    // 找到当前li下的a标签，插入SUB标识
                    $('<span class="sub-indicator">SUB</span>').insertAfter($(this).find('a'));
                }
            });
        });
    </script>
    <!-- 可选：给SUB标识加样式美化 -->
    <style>
        .sub-indicator {
            margin-left: 8px;
            color: #666;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <!-- 示例菜单结构 -->
    <ul>
        <li>
            <a href="#">主菜单1</a>
            <ul>
                <li><a href="#">子菜单1-1</a></li>
                <li><a href="#">子菜单1-2</a></li>
            </ul>
        </li>
        <li><a href="#">主菜单2</a></li>
        <li>
            <a href="#">主菜单3</a>
            <ul>
                <li><a href="#">子菜单3-1</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>

额外小建议 #

如果你的<a>标签一定是<li>的直接子元素，用$(this).children('a')代替find('a')性能会更好，因为它只查找当前节点的直接子元素，不用遍历所有后代。

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