Append should be a method in jq. Why can I achieve the same effect as appendChild when I use js without introducing jq?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>IFE JavaScript Task 01</title>
</head>
<body>
<h3>污染城市列表</h3>
<ul id="aqi-list">
<!--
<li>第一名：福州（样例），10</li>
<li>第二名：福州（样例），10</li> -->
</ul>
<script type="text/javascript">
var aqiData = [
["北京", 90],
["上海", 50],
["福州", 10],
["广州", 50],
["成都", 90],
["西安", 100]
];
(function() {
/*
在注释下方编写代码
遍历读取aqiData中各个城市的数据
将空气质量指数大于60的城市显示到aqi-list的列表中
*/
var aqiList = document.getElementById("aqi-list");
var aqiArray = [];
var cnArray = ["一", "二", "三", "四", "五", "六"];
//大于60的放进数组并排序
for(var i = 0; i < aqiData.length; i++) {
if(aqiData[i][1] >= 60) {
aqiArray.push(aqiData[i]);
aqiArray.sort(function(a,b){
return b[1]-a[1];
});
};
};
//循环数组，创建节点
for(var i = 0; i < aqiArray.length; i++) {
var newLi = document.createElement("li");
newLi.innerHTML = "第" + cnArray[i] + "名：" + aqiArray[i];
aqiList.append(newLi);
};
})();
</script>
</body>
</html>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
This is a method on the node node, but there are browser compatibility issues, so try not to use it
MDN has documentation
https://developer.mozilla.org...
parentNode.append() is still in the trial period and has compatibility issues. It is to insert a new Node or
DOMString(string, after insertion, it will be a Text node) after the last child node in the parendNode node.is replaced with
parentNode.appendChild()的区别在于：parentNode.append()可以同时传入多个节点或字符串，没有返回值；而
parentNode.appendChild()只能传一个节点，且不直接支持传字符串(需要parentNode.appendChild(document.createTextElement('字符串'))), returning the appended Node nodeAfter typing and submitting, I found the correct answer above haha
append and appendChild have the same function, but one is written in jq, and the other is written in js native way
aqiList is an array, and append is one of the array methods of native js.