javascript - 在 unorderdlist 中的指定 listItem 下插入项目，而不是在底部

Question

我正在为一个网站制作一个评论系统，该系统通过 Ajax 请求获取评论并将它们添加到评论列表中。这工作正常，但它总是将它们添加到列表的底部。这是因为我正在使用 list.appendChild(item);为此，我现在需要找到替代方案...

有没有办法添加一个<li>另一个 <li> 下的元素我知道其中的 ID？

这是一个video包含当前行为

及其代码:

function loadcomments(id){
    $.ajax({
        url: '/ajax/getcomments/',
        data: {
            'identifier': '{{ identifier }}',
            'id': id,
            'begin': '0',
            'end': '30',
        },
        dataType: 'json',
        success: function (data) {
            var json = JSON.parse(data.comments);
            console.log(json);
            makeUL(json);
            function makeUL(array) {
                list = document.getElementById('commentlist');
                for(var i = 0; i < array.length; i++) {
                    if(!document.getElementById("comment-id-" + array[i].pk)){
                        var item = document.createElement('li');
                        item.className = "commentlistelement"
                        item.setAttribute('id',"comment-listitem-id-" + array[i].pk)
                        var maindiv = document.createElement('div')
                        maindiv.setAttribute('id',"comment-id-" + array[i].pk);
                        maindiv.className = "row comment";
                        maindiv.setAttribute("style","padding-left: "+3*array[i].fields.indent+"vw;");
                        maindiv.innerHTML = "<div class=\"col-md-1\">profile<br>pic</div><div class=\"col-md-9\"><small>"+ array[i].fields.user +"  </small><small><button class=\"buttonlink\" onclick=\"reply("+ array[i].pk +")\">reply</button></small> <small><button class=\"buttonlink\" onclick=\"loadcomments("+ array[i].pk +")\">show more</button></small><br><p>" + array[i].fields.description + "</p></div>";
                        item.appendChild(maindiv);
                        list.appendChild(item);
                    }
                }
                return list;
            }
        }
    });
};

Answer 1

您或许可以使用 Node 对象的 firstChild 和 insertBefore 方法:

https://developer.mozilla.org/en-US/docs/Web/API/Node/firstChild

https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore

JQuery 也有一个 insert after 方法:

http://api.jquery.com/insertafter/

获取列表容器的第一个 child 。然后在它前面插入。