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中各個城市的數(shù)據(jù)
將空氣質(zhì)量指數(shù)大于60的城市顯示到aqi-list的列表中
*/
var aqiList = document.getElementById("aqi-list");
var aqiArray = [];
var cnArray = ["一", "二", "三", "四", "五", "六"];
//大于60的放進(jìn)數(shù)組并排序
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];
});
};
};
//循環(huán)數(shù)組,創(chuàng)建節(jié)點(diǎn)
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>
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 method inserts a set of Node objects or DOMString objects after the last child node of ParentNode.
The inserted DOMString object is equivalent to a Text node.
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()
的區(qū)別在于:parentNode.append()
可以同時傳入多個節(jié)點(diǎn)或字符串,沒有返回值;
而parentNode.appendChild()
只能傳一個節(jié)點(diǎn),且不直接支持傳字符串(需要parentNode.appendChild(document.createTextElement('字符串'))
), returning the appended Node node
After 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.