javascript-listChild的appendChild仅影响list的最后一个元素.

我想在屏幕上显示本地存储中的几个元素,我通过遍历列表并使用javascript创建元素然后追加它们来实现这一点,除了我要添加的按钮是仅添加到最终元素.我似乎不知道为什么.我可以将其他文本附加到同一li元素,但不能附加到按钮.

任何帮助表示赞赏,谢谢！

document.getElementById('savedScenarios').appendChild(listSavedScenarios());
        function listSavedScenarios() {
            // Create the list element:
            var listElement = document.createElement('ul');
            var button = document.createElement("BUTTON");
            button.setAttribute("id", "load");
            var t = document.createTextNode("CLICK ME");
            button.appendChild(t);
            for(var i = 0; i < localStorage.length; i++) {
                // Create the list item:
                var listItem = document.createElement('li');
                //Get the local storage name and add it to the list elmt
                listItem.appendChild(document.createTextNode(localStorage.key(i)));
                listItem.appendChild(button);
                //update list
                listElement.appendChild(listItem);
            }
            return listElement;
        }

上面的结果是：

li-存储密钥(1)
 li-存储的密钥(2)
 li-存储空间中的键(3)单击我

解决方法:

except the button that i am adding is only being added to the final element.

不,它被添加到循环中的每个元素上–并且发生这种情况时,它当然是从那时的任何位置获取的,因为这是appendChild的工作方式–在此之前,它将元素从其当前DOM位置中删除.元素附加在其他位置.

Interface Node, Method appendchild：

“将节点newChild添加到该节点的子节点列表的末尾.如果newChild已经在树中,则首先将其删除.”

您要么必须创建一个新按钮以将其附加到循环中的当前LI上,要么至少要克隆元素并将克隆附加到当前LI上.

(而且您每次都必须为按钮指定一个不同的ID,因为ID在文档中必须是唯一的.)

标签：web,local-storage,html,javascript
来源： https://codeday.me/bug/20191121/2054156.html