Question

var sitename = "http://127.0.0.1:8000/";
var ajaxhot = document.getElementById("hotajax");
var ajaxpopular = document.getElementById("popularajax");
var ajaxtoday = document.getElementById("todayajax");
var ajaxcurrent = document.getElementById("partial-index");
var ajaxindex = document.getElementById("ajax-index");

function indexajaxfunc(ajaxbutton, getfrom) {
    ajaxbutton.addEventListener("click", function () {
        var getnew = new XMLHttpRequest();
        var parser = new DOMParser();
        getnew.open("GET", sitename + getfrom);
        getnew.onload = function () {
            var newtitlespagestring = getnew.responseText;
            var newtitlespage = parser.parseFromString(newtitlespagestring, "text/html");
            var newtitles = newtitlespage.getElementById("content-body").children[1];
            ajaxcurrent.children[0].children[0].innerHTML = newtitlespage.getElementById("content-body").children[0].innerHTML;
            while (ajaxindex.hasChildNodes()) {
                ajaxindex.removeChild(ajaxindex.lastChild)
            }
            console.log(newtitles.childElementCount);
            for(i=0; i<newtitles.childElementCount; i++) {
                ajaxindex.append(newtitles.children[i])
            }
        };
        getnew.send();
    });
}

indexajaxfunc(ajaxhot, "titles/hot/");
indexajaxfunc(ajaxpopular, "titles/popular/");
indexajaxfunc(ajaxtoday, "titles/today/");

我正在尝试从网址获取元素并将其附加到ajaxindex中，但我得到了意想不到的结果。

---＆GT;虽然语句删除了所有孩子。

---＆GT;控制台记录新的标题计数，即25（热和今天）或4（流行）

---＆GT;然后下一个语句应该将所有标题附加到ajaxindex，但它只附加一半，25个标题中的13个或4个标题中的2个。

如果我稍微修改代码并将其更改为

        for(i=0; i<newtitles.childElementCount; i++) {
            console.log(newtitles.children[i])
        }

它会从新页面记录所有25个（或4个流行的）标题，但出于某种原因我将其修改为

        for(i=0; i<newtitles.childElementCount; i++) {
            console.log(newtitles.children[i]);
            ajaxindex.append(newtitles.children[i]
        }

它都附加并记录13个（或2个，如果受欢迎的）新元素。

我已经尝试用i＆lt; 25手动替换for循环的计数，但它只会在html的末尾附加13和纯文本广告“undefined”。

我的问题是，为什么会发生这种情况，我该如何解决？

Answer 1

DOM节点不能同时位于两个DOM树中。在循环中调用.append()时，它会将节点附加到指定的父节点，从其当前父节点中删除。因此，每次增加i时，都会跳过下一个节点。

另请注意，.append()是未在所有浏览器中实施的实验性功能。请考虑改为使用.appendChild()。

有几种方法可以解决这个问题;一种简单的方法是将for循环更改为：

while( newtitles.firstChild ) {
    console.log( newtitles.firstChild );
    ajaxindex.appendChild( newtitles.firstChild );
}

还值得注意的是，您错过了var循环中的let或for。当然，这不是上面while循环的问题。

.append（）方法只附加一半的项目

1 个答案: