Question

对于挑战，我正在调用一个twitch TV API获取信息并更新我的HTML。

使用for循环，我setAttributes和divs成功appendChilds。但是当我想要更新这些孩子时，它只更新上一个div的孩子。

我需要你的帮助来更新我附加的所有孩子。以下是我的代码：

             // variables declarations to update the DOM
                var users = usersJson.data;
                var i;
                var usersIds = [];
                var channels = document.getElementById("all").children;
                console.log(channels);

                // pushing channels ids into an array for a later
                for (i = 0; i < users.length; i++) {
                    usersIds.push(users[i].id); 
                }

                var channelImg = document.createElement("img");
                var channelTitle = document.createElement("h3");

                for (var i = 0; i < channels.length; i++) {
                    channels[i].setAttribute("id", users[i].id);
                    channels[i].setAttribute("class", "channelInfo" + (i + 1) + " " + "channel" + (i + 1));

                    channels[i].appendChild(channelTitle);
                    channels[i].appendChild(channelImg).setAttribute("id", "img-holder" + (i + 1));

                    channelTitle.innerHTML = users[i].display_name;
                    channelImg.setAttribute("src", users[i].profile_image_url);

                }

https://jsfiddle.net/xpcz1r5k/1/

Answer 1

元素的创建需要进入for循环：

            for (var i = 0; i < channels.length; i++) {
                var channelImg = document.createElement("img");
                var channelTitle = document.createElement("h3");

                channels[i].setAttribute("id", users[i].id);
                channels[i].setAttribute("class", "channelInfo" + (i + 1) + " " + "channel" + (i + 1));

                channels[i].appendChild(channelTitle);
                channels[i].appendChild(channelImg).setAttribute("id", "img-holder" + (i + 1));

                channelTitle.innerHTML = users[i].display_name;
                channelImg.setAttribute("src", users[i].profile_image_url);

            }

当创建位于循环的外部时，appendChild只有将元素移动到下一个父元素。 appendChild不会克隆/复制DOM元素。因此，您最终会不断更新相同的DOM元素，最后一个最终获胜。

使用for循环访问和管理DOM

1 个答案: