列表内容排序再渲染
<!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<ul><li>project 1</li></ul></li>
<li id="item3">项目 3</li>
<li id="item2">项目 2</li>
<li id="item4">项目 4</li>
</ul>
<script>
function sortAndReturnTextContent() {
//获取id为myList的元素的所有子元素，返回的是一个HTMLCollection。
const items = document.getElementById('myList').children;
console.log(items)
//将items转化为数组再排序
const itemsArr = Array.from(items).sort((a,b) => {
return a.id > b.id ? 1 : -1 })
console.log(itemsArr)
//将数组中的对象转化为HTML
console.log(itemsArr.map(item => item.outerHTML))
document.getElementById('myList').innerHTML = itemsArr.map(item => item.outerHTML).join('')}
sortAndReturnTextContent()
</script>
</body>
</html>
画直角三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class='triangle'></div>
<script>
var triangle = document.querySelector('.triangle');
var str = ''
for (var i = 1; i < 10; i++) {
for (var j = 0; j < i; j++) {
if(j == 0||j==i-1){
str += '*'}else{
str += '  '}
}
str += '<br />'
}
for (var j = 0; j < 10; j++) {
str += '*'
}
str += '<br />'
triangle.innerHTML = str
</script>
</body>
</html>