Javascript 将子元素追加到列表元素仅影响列表的最后一个元素。

我想在屏幕上显示本地存储中的几个元素，我通过迭代列表并使用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;
        }

document.getElementById（'savedScenarios'）.appendChild（listSavedScenarios（））；
函数listSavedScenarios（）{
//创建列表元素：
var listeElement=document.createElement（'ul'）；
var button=document.createElement（“按钮”）；
setAttribute（“id”、“load”）；
var t=document.createTextNode（“单击我”）；
按钮。追加子项（t）；
for（var i=0；i

上述结果是：

li-来自存储器的密钥（1） li-来自存储器的密钥（2） li-从存储器输入密钥（3）单击我

除了我正在添加的按钮只添加到最后一个元素

不，它被添加到循环中的每个元素中——当这种情况发生时，它当然是从该点的任何位置获取的，因为这就是

appendChild

的工作方式——它从当前DOM位置移除元素，然后将该元素附加到其他位置

:

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

您必须创建一个新按钮以附加到循环中的当前LI–或者至少克隆元素并将克隆附加到当前LI

（你每次都必须给按钮一个不同的id，因为一个id在一个文档中必须是唯一的。）

：）我刚才在这里读到：）虽然，我在循环中创建了对接，但我没有更改id