JS0列表内容排序再渲染_场景描述:在一个 html 页面中,有一个无序列表(ul),其中包含了一些项目(li)。每个-CSDN博客

本文链接：https://blog.csdn.net/ch_ss/article/details/136342291

描述

场景描述：在一个 HTML 页面中，有一个无序列表（ul），其中包含了一些项目（li）。每个项目都有一个文本内容和一个唯一的 ID。你需要编写一个 JavaScript 函数来提取列表中所有项目的文本内容，并将它们按照 ID 进行排序，然后将排序后的文本内容重新渲染回去。

代码实现：补全sortAndReturnTextContent函数，实现功能

<body>
    <ul id="myList">
        <li id="item1">项目 1</li>
        <li id="item3">项目 3</li>
        <li id="item2">项目 2</li>
        <li id="item4">项目 4</li>
    </ul>

    <script>
        function sortAndReturnTextContent() {
            const items = document.getElementById('myList').children;
            // 在此补全代码
            //方法一：转换真正数组，利用sort方法排序
            // let newItems = Array.from(items).sort((a, b) => {
            //     return a.id > b.id ? 1 : -1
            // })
            // document.getElementById('myList').innerHTML = newItems.map(item => item.outerHTML).join(" ")

            //方法二:将元素push到新数组中，并将id转换为数字，利用sort方法排序
            let newItems = []
            for(let i = 0; i < items.length; i++) {
                newItems.push({
                    id: items[i].id.replace('item', ''),
                    outerHTML: items[i].outerHTML
                })
            }
            document.getElementById('myList').innerHTML = newItems.sort((a, b) => a.id-b.id).map(item => item.outerHTML).join("")
        }
        sortAndReturnTextContent()
    </script>
</body>