Question

我有一个相当简单的想法，我想实施。

我有一组具有两个属性的对象：＆＃34; id＆＃34;和＆＃34;名称＆＃34;我想在一系列＆＃34; p＆＃34;中列出这些内容。标签将在＆＃34; div＆＃34;。

中

所以这是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>&nbsp</small>\n" +
        "</p>\n";
        div.appendChild(node);
        element.appendChild(div);
    }
}
window.onLoad = function(){
    listAll();
}

这并不能填补任何内容。我也把它放在了JSFiddle上。

我是否误解了Array.push的工作原理？或者与appendChile和createElement有什么关系？

提前感谢您的帮助。

Answer 1

前面有两个问题 - 尝试在id上设置name和playerList[0]（目前尚不存在）将无效。

其次，尝试添加一个完整的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 = '&nbsp;';
        p.appendChild(small);

        div.appendChild(p);

        element.appendChild(div);
    }
}
listAll();

示例：http://jsfiddle.net/NF45y/

Answer 2

最初：

var playerList = [];
playerList[0].id = 0;

您应该在尝试设置 undefined 的 id 属性时收到错误消息。你可以这样做：

var playerList = [{}];
playerList[0].id = 0;
playerList[0].name = "Add New Player";

或以与其他对象相同的方式添加对象。在函数内;

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 + ")");

不要使用setAttribute以这种方式添加侦听器，它不是如何使用它并且无法在任何地方使用，为简单起见使用DOM属性：

        div.onclick = function(){...};

由于您在循环内设置值，因此需要使用变量来中断闭包。立即调用的函数表达式（IIFE）可以提供帮助：

        div.onclick = (function(id) {
                         return function(){formOver(id);}
                      }(playerList[i].id));

不要在HTML文档中使用XML语法，并且＆＃39; \ n＆＃39;中没有多少内容。除非您打算阅读标记：

        node = "<p>" + playerList[i].name + "<br><small>&nbsp</small></p>";
        div.appendChild(node);

appendChild 需要一个DOM元素，而不是标记。由于这是div的唯一内容，因此您可以使用标记来设置其 innerHTML 属性（您可能希望将 node 的名称更改为标记）：

        div.innerHTML = node;

        element.appendChild(div);
    }
}

遇到createElement和appendChild问题

2 个答案: