我有一个相当简单的想法想要实现。
我有一个具有两个属性的对象数组:“id”和“name”，我想将它们列在“div”内的一系列“p”标签中。
这是 HTML:
<body>
<div id="listView"></div>
</body>
这是标签中的 JavaScript:
sessionStorage.eventid = 2;
var playerList = [];
playerList[0].id = 0;
playerList[0].name = "Add New Player";
playerList.push({
id: 5,
name: "Asako"
});
playerList.push({
id: 6,
name: "James"
});
playerList.push({
id: 7,
name: "Brian"
});
playerList.push({
id: 8,
name: "Helmut Spargle"
});
function listAll() {
var element = document.getElementById("listView");
var div;
var node;
for (var i = 0; i < playerList.length; i++) {
div = document.createElement("div");
div.setAttribute("onClick", "javascript: formOver(" + playerList[i].id + ")");
node = "<p>" + playerList[i].name + "<br />\n" +
"<small> </small>\n" +
"</p>\n";
div.appendChild(node);
element.appendChild(div);
}
}
window.onLoad = function(){
listAll();
}
这并没有填充任何东西。我已将其放在JSFiddle上也是如此。
我是否误解了 Array.push 的工作原理？或者与appendChile和createElement有关？
预先感谢您的帮助。
最佳答案
两个问题 - 前面，尝试在 playerList[0] (尚不存在)上设置 id 和 name行不通。
其次，尝试添加一个充满 html 的整个“节点”，jQuery 风格，在纯 JS 世界中不起作用。您需要构建各个元素。
sessionStorage.eventid = 2;
var playerList = [];
playerList.push({
id: 0,
name: "Add New Player"
});
playerList.push({
id: 5,
name: "Asako"
});
playerList.push({
id: 6,
name: "James"
});
playerList.push({
id: 7,
name: "Brian"
});
playerList.push({
id: 8,
name: "Helmut Spargle"
});
function listAll() {
var element = document.getElementById("listView");
var div = document.createElement("div");
var node = "some string";
for (var i = 0; i < playerList.length; i++) {
div = document.createElement("div");
div.setAttribute("onClick", "formOver(" + playerList[i].id + ")");
var p = document.createElement('p');
p.innerHTML = playerList[i].name;
var br = document.createElement('br');
p.appendChild(br);
var small = document.createElement('small');
small.innerHTML = ' ';
p.appendChild(small);
div.appendChild(p);
element.appendChild(div);
}
}
listAll();
关于javascript - createElement 和appendChild 遇到问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24421157/