题解 | #列表内容排序再渲染#
列表内容排序再渲染
https://www.nowcoder.com/practice/2dffcb354a484995894655a5547b0b49
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<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;
// 在此补全代码
const newList = Array.from(items).map(node => {
return {
id: node.getAttribute('id'),
val: node.innerText
}
});
newList.sort((a, b) => a.id.localeCompare(b.id));
document.getElementById('myList').innerHTML = '';
newList.forEach(node => {
const li = document.createElement('li');
li.textContent = node.val;
li.id = node.id;
document.getElementById('myList').appendChild(li);
})
}
sortAndReturnTextContent()
</script>
</body>
</html>
// 考察的是对dom元素的常规操作，比如appendChild、createElement
// 数组转换 Array.from
// 字符串大小比较采用方法 localeCompare
#机考#
查看23道真题和解析