Question

我正在使用javascript创建一个列表。在每个列表项之后，插入了两个按钮。但这些按钮只出现在最后一个列表项上。请帮帮我。 My Code

这是我使用JS`

更新列表的函数

function updateView() {
    fetchFromLocal(); //fetches list from local storage and updates TaskList array
    list.innerHTML = ""; //list is var that points to unordered list

    var checkbox = document.createElement("input");
    checkbox.setAttribute('type', 'checkbox');
    var btnUp = document.createElement("input");
    btnUp.setAttribute('type', 'button');
    btnUp.setAttribute('value', '^');
    // console.log(btnUp);
    var btnDown = document.createElement("input");
    btnDown.setAttribute('type', 'button');
    btnDown.setAttribute('value', 'v');


    for(var i=0;i<TaskList.length;i++)
    {
        var TempElem = document.createElement("li");
        //console.log(TempElem);

        TempElem.appendChild(checkbox);
        // console.log("Elem after checkbox " + TempElem.innerHTML);
        TempElem.innerHTML += " <span class='listitem'> " + TaskList[i] + "</span>";
        // console.log("Elem after tasklist "+ TempElem.innerHTML);
        TempElem.appendChild(btnUp);
        TempElem.appendChild(btnDown);
        console.log("Final Tepelem " + TempElem.innerHTML);
        list.appendChild(TempElem);

    }
}

Answer 1

因为您要附加相同的元素，因为相同的元素不能位于多个位置，所以它会移动到新位置。您需要在追加之前克隆它们。

https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode

TempElem.appendChild(checkbox.cloneNode(true));

您还需要对按钮执行此操作。

添加新列表项时按钮消失了吗？

1 个答案: