将子元素添加到列表元素中只会影响列表中的最后一个元素。

Question

我在本地存储中有几个元素，希望在屏幕上显示它们。我通过遍历列表并使用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;
        }

上面的结果是：

来自存储的密钥（1）

来自存储的密钥（2）

来自存储的密钥（3） 点击我

- null

Answer 1

除了我正在添加的按钮仅被添加到最后一个元素中之外，其他元素都没有添加。

不，它会被添加到循环内的每个元素中 - 在这个过程中，它当然会从可能在那时的任何位置取出，因为这就是appendChild的工作方式 - 它会将一个元素从其当前的DOM位置移除，然后再附加到其他地方。 Interface Node, Method appendchild：

“将节点newChild添加到此节点的子节点列表末尾。如果newChild已经在树中，则首先删除它。”

您要么必须在循环内创建一个新的按钮以附加到当前的LI中 - 或者至少克隆该元素并将克隆附加到当前的LI中。

（并且您必须每次给按钮赋予不同的id，因为id必须在文档中是唯一的。）

- CBroe

---

我刚刚在这里阅读了：http://reference.sitepoint.com/javascript/Node/appendChild :) 不过，我在循环内部创建了按钮，虽然我没有更改ID，但出现了相同的问题。 - null