- Gemeinschaft
- Lernen
- Tools-Bibliothek
- Freizeit
Heim > Fragen und Antworten > Hauptteil
Append sollte eine Methode in jq sein. Warum kann ich den gleichen Effekt wie appendChild erzielen, wenn ich js verwende, ohne jq einzuführen?
<!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>
曾经蜡笔没有小新2017-05-19 10:18:34
这是个node节点上的方法，不过浏览器兼容有问题，尽量不要用
MDN有文档
https://developer.mozilla.org...
ParentNode.append 方法在 ParentNode的最后一个子节点之后插入一组 Node 对象或 DOMString 对象。
被插入的 DOMString 对象等价为 Text 节点。
phpcn_u15822017-05-19 10:18:34
parentNode.append()是还在试用期的方法，有兼容问题。是在parendNode节点中最后一个子节点后插入新Node或者DOMString（字符串，插入后为Text节点）.
与parentNode.appendChild()的区别在于：parentNode.append()可以同时传入多个节点或字符串，没有返回值；
而parentNode.appendChild()只能传一个节点，且不直接支持传字符串(需要parentNode.appendChild(document.createTextElement('字符串'))代替)，返回追加的Node节点
打完字提交发现上面有了正解 哈哈