希望我没有想太多。我应该如何按时间顺序对用户输入进行排序，使最旧的电影首先显示在新排序的列表中？
示例:
1980 - 帝国反击
1996 年 - 独立日
1997 - 泰坦尼克号
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form>
Year: <br>
<input id="year" type="text"><br>
Movie:<br>
<input id="mName" name="MovieName" type="text"><br>
</form>
<br>
<button onclick="myFunction(list)" type="submit">Submit</button>
<div id="container">
<ul id="list">
</ul>
</div>
<script src="assets/js/main.js">
</script>
</body>
</html>
JS
function myFunction(list){
var text = "";
var inputs = document.querySelectorAll("input[type=text]");
for (var i = 0; i < inputs.length; i++) {
text += inputs[i].value;
}
var li = document.createElement("li");
var node = document.createTextNode(text);
li.appendChild(node);
document.getElementById("list").appendChild(li);
}
最佳答案
Update the
DOMafter every insertion of theliElement.
不要将
year和name作为纯文本插入，而是将其包装在span中以便使用DOM 访问 - api(querySelector/All)使用
Array.from从类数组或可迭代对象创建新的数组实例使用
Array#sort对集合进行排序将
sorted数组附加到Array#forEach中的父UL元素循环
function myFunction(list) {
var text = "";
var inputs = document.querySelectorAll("input[type=text]");
for (var i = 0; i < inputs.length; i++) {
text += '<span>' + inputs[i].value + '</span>';
}
var li = document.createElement("li");
li.innerHTML = text;
document.getElementById("list").appendChild(li);
var liElemens = document.querySelectorAll('#container #list li');
liElemens = Array.from(liElemens);
liElemens.sort(function(a, b) {
var aSpan = +a.children[0].textContent;
var bSpan = +b.children[0].textContent;
return aSpan > bSpan;
});
var parent = document.querySelector('#list');
while (parent.hasChildNodes()) {
parent.removeChild(parent.firstChild);
}
liElemens.forEach(function(elem) {
parent.appendChild(elem);
});
}<form>
Year:
<br>
<input id="year" type="text">
<br>Movie:
<br>
<input id="mName" name="MovieName" type="text">
<br>
</form>
<br>
<button onclick="myFunction(list)" type="submit">Submit</button>
<div id="container">
<ul id="list">
</ul>
</div>关于Javascript:按时间顺序对用户输入进行排序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38045222/