所以我有一個用戶可以創建的一些任務的html節點，當用戶單擊按日期排序時，我希望它在html中排序和更改，但我不知道如何做html部分，有什么想法嗎？
我可以在JS中進行排序，這真的不難，但我不知道如何將排序應用到html中，也許是將節點存儲到JavaScript變量中，然后清除任務列表并用排序的方式追加子元素？
您的輸入節點需要是動態的。 理想情況下，你可以使用react這樣的框架，這樣做很容易。 如果您使用普通的javascript，那么最簡單的方法(正如您已經建議的)是
使用類似parent.innerHTML = ' '的方法清除列表的父節點的子節點(有更好的方法來清除父節點的子節點，但不推薦使用這種方法，因為它不會清除子節點的任何事件偵聽器) 然后根據您的方便重新呈現列表項，并使用parent.append(child)函數將它們附加到父節點 例如 認為html是
<html>
<div>
<ul id="root-list-node">
</ul>
</div>
<div>
<button id="submit" onclick="submit()">
order
</button>
</div>
</html>并且相關聯的js將被
let listItems = [
{text: "item1", order: 2},
{text: "item2", order: 1},
{text: "item3", order: 3},
]
const renderList = () => {
const listRoot = document.getElementById("root-list-node")
listRoot.innerHTML = ''; //clear all children
const listItemNodes = listItems.map((element) =>{
// mapping each list item to a new node with <li> tag
let listItemNode = document.createElement("li")
listItemNode.textContent = element.text //populating the text in this tag
return listItemNode
})
listRoot.append(...listItemNodes) //appending the li node to the ul parent tag
}
window.onload = () => {
renderList()
}
submit = () => {
listItems.sort((a,b) => {
return a.order - b.order
})
renderList()
}在這里，renderList函數基于您的listItems動態地加載HTML中的內容，方法是刪除父節點可能有的任何子節點，然后追加新的子節點，這首先在onload期間完成。 當您單擊按鈕進行排序時，它會根據order屬性對listItems數組進行排序，然后再次運行renderList。
一個工作的js小提琴可以在這里找到https://jsfiddle.net/1Lwqtu8e/20/
創建一個擴展名為. html的HTML文件(例如index.html)。 在文本編輯器或集成開發環境(IDE)中打開HTML文件。 在HTML文件的部分中，添加一個標記來包含您的JavaScript代碼。您可以直接在標記中編寫JavaScript代碼，或者使用src屬性引用外部JavaScript文件。