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;
        }

以上结果是：

li - 存储钥匙（1） li - 存储钥匙（2） li - 存储密钥（3）点击我

Answer 1

除了我添加的按钮只被添加到最终元素。

不，被添加到你循环中的每个元素 - 当发生这种情况时，它当然取自那时的任何地方，因为是{{ 1}}工作 - 它将元素从当前的DOM位置移除，然后将该元素附加到其他地方。

Interface Node, Method appendchild：

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

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

（并且您每次都必须为该按钮指定一个不同的ID，因为ID必须在文档中是唯一的。）

appendChild to list元素只影响列表的最后一个元素。

1 个答案: