Question

我有这个简单的代码。我需要将这个ul html列表添加到“my-div”，但是使用此代码我无法添加它。知道什么是错的吗？

可以使用jquery添加片段吗？

 this.renderMenuTop = function() {

        var menu, f, ul;
        menu = ['menu-actuality', 'menu-archive', 'menu-pdf', 'menu-pictures'];
        f = document.createDocumentFragment();
        ul = document.createElement('ul');
        for (var i = 0; i < menu.length; i++) {
            var li = document.createElement('li')
            li.id = menu[i];
            ul.appendChild(li);
        }     
        document.getElementById("my-div").appendChild(f);

        //$(this.elmMenuTop).append(f);
    }

Answer 1

您永远不会在文档片段中添加任何元素。在for循环后添加此内容：

f.appendChild(ul);

另一个选择是完全转储文档片段，只是：

document.getElementById("my-div").appendChild(ul);
//                                            ^^ Change from f to ul

Answer 2

您在哪里将列表添加到片段中？你需要添加

f.appendChild(ul);

在将其添加到div之前

。或者，只需将列表直接添加到没有片段的div。

Answer 3

你永远不会在f中放任何东西。但为什么你甚至有一个文件片段？

this.renderMenuTop = function() {
    var menu = ['menu-actuality', 'menu-archive', 'menu-pdf', 'menu-pictures'];
    var ul = document.createElement('ul');
    for (var i = 0; i < menu.length; i++) {
        var li = document.createElement('li')
        li.id = menu[i];
        ul.appendChild(li);
    }
    document.getElementById("my-div").appendChild(ul);

    //$(this.elmMenuTop).append(f);
};

如果你需要将它附加到两个不同的东西，文档片段将无济于事。

Answer 4

要回答问题的第二部分，jQuery也可以这样做：

this.renderMenuTop = function() {
    var menu = ['menu-actuality', 'menu-archive', 'menu-pdf', 'menu-pictures'];
    var $ul = $('<ul></ul>');
    for (var i = 0; i < menu.length; i++) {
        $ul.append('<li>' + menu[i] + '</li>');
    }
    $('#my-div').append($ul);
}

如何将文档片段添加到div

4 个答案: