Question

我正在尝试使用jQuery动态创建一组嵌套的无序列表。嵌套<ul>发生了什么，<li>作为兄弟而不是孩子插入。

这是一个简单的复制品，显示了这个问题：

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    </head>
    <body>
        <h1>Test</h1>
        <script>
            var $ul = $("<ul></ul>");
            $ul.insertAfter($('h1'));

            append($ul);

            function append($theList) {
                var $listItem = $('<li><div>Hello</div></li>');
                var $newUl = $listItem.append('<ul></ul>');
                $newUl.append($('<li>test</li>'));
                $theList.append($listItem);
            }
        </script>
    </body>
</html>

结果DOM是

<ul>
    <li>
        <div>Hello</div>
        <ul></ul>
        <li>test</li>
    </li>
</ul>

我希望它是：

<ul>
    <li>
        <div>Hello</div>
        <ul>
            <li>test</li>
        </ul>
    </li>
</ul>

如何在<li>下添加嵌套<ul>？

注意非简化版本是重新定义的，并且完全将字符串元素构建为字符串并不实用 - 我需要能够将其作为子元素插入到DOM中<ul>。

Answer 1

$listItem.append('<ul></ul>');

这一行返回$ listItem，而不是新的＆＃34; ul＆＃34;元件。使用appendTo。

var $newUl = $('<ul></ul>').appendTo($listItem);

动态添加jQuery元素会添加为兄弟，而不是孩子

1 个答案: