Fatal编程技术网
  • javascript/
  • Javascript createElement和appendChild有问题

Javascript createElement和appendChild有问题

javascript html

Javascript createElement和appendChild有问题,javascript,html,appendchild,createelement,Javascript,Html,Appendchild,Createelement,我有一个相当简单的想法，我想实施 我有一个具有两个属性的对象数组：id和name我想在div中的一系列p标记中列出它们 下面是HTML： <body> <div id="listView"></div> </body> 下面是标签中的JavaScript： sessionStorage.eventid = 2; var playerList = []; playerList[0].id = 0; playerList[0].name =

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

我有一个具有两个属性的对象数组：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>&nbsp</small>\n" +
        "</p>\n";
        div.appendChild(node);
        element.appendChild(div);
    }
}
window.onLoad = function(){
    listAll();
}
这并没有填满任何东西。我也穿上了

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

提前感谢您的帮助。

有两个问题-首先，尝试在尚未存在的playerList[0]上设置id和名称将无法工作

其次，试图添加一个完整的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();
示例：

最初：

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 + ")");
由于要在循环中设置值，因此需要使用变量来中断闭包。立即调用的函数表达式IIFE有助于：

        div.onclick = (function(id) {
                         return function(){formOver(id);}
                      }(playerList[i].id));
不要在HTML文档中使用XML语法，“\n”没有多大意义，除非您要阅读标记：

        node = "<p>" + playerList[i].name + "<br><small>&nbsp</small></p>";
        div.appendChild(node);
您有两个问题，请查看小提琴中的javascript控制台。第一个是当playerList[0]未定义时，可以在playerList[0]上设置属性。因此playerList[0]。id无效。只需按原样添加推送项，其他所有项都将按原样添加。其次，不能使用appendChild并向其传递字符串。您需要向其传递一个元素。例如，使用createElement创建的元素。如何查看控制台？我以前从未使用过JSFIDLE。我找不到它的按钮。谢谢你的其他建议，@MattBurland。它起了很大的作用。除了现在，我已经使用document.createtextnodestring；它将所有标记输出为字符串，而不是将它们解析为HTML。这是否意味着我将不得不使一大堆元素和节点彼此分离？或者我应该只使用innerHTML吗？如果您愿意，可以使用innerHTML。对于控制台，这取决于您的浏览器，但F12是一个很好的选择。否则，请查看浏览器中的菜单，可能在“工具”和“web开发人员”或类似内容下。或者只是谷歌如何在浏览器x中查看javascript控制台。控制台是调试的第一步，错误消息将出现在这里。但现在你已经说过，这似乎太明显了。干杯不要对事件使用dom属性。使用addEventListenerclick函数{}，因为它违反了常规约定。它还允许为每个元素添加多个处理程序。OP只添加了一个监听器，它不会为同一事件预先生成其他监听器的添加，它在使用中的每个浏览器中都受支持尝试IE8中的addEventListener，它的代码更少，速度更快。顺便说一句，在您的fiddle中，处理程序使用未定义的值调用formOver。你链接到的答案显然是支持“不做这个”的，但不支持“不做那个”-我选择了div.innerHTML=+playerList[I].name+\n\n

\n；相反，你的回答让我有了更深的理解。谢谢。请注意div.setAttributeonClick，formOver+playerList[i].id+实际上会导致formOverundefined。我绝对不认为这是Chrome、Firefox或Opera的问题。当我点击时，它会做它应该做的事情。请阅读下面的评论，这可能是我在Fiddle中忽略的，以减少调试不必要的代码量。 
        node = "<p>" + playerList[i].name + "<br><small>&nbsp</small></p>";
        div.appendChild(node);

        div.innerHTML = node;

        element.appendChild(div);
    }
}