Question

我正在尝试创建一个朋友列表，为此我需要为每个朋友创建一个div。我试过的代码没用。

相关JavaScript（现在在页面底部）：

<pre id="out"></pre>

相关CSS：

    document.getElementById("name").innerHTML = user;
        document.getElementById("profilePic").src = "users/" + user + "/profilePic.jpg";

    var friends = ["Test"];
    var friendArea = document.getElementById("friendsDiv");
    for (i=0; i < friends.length; i++) {
        var friendDiv = document.createElement("div");
        friendDiv.setAttribute("class", "friend");
        var friendImage = document.createElement("img");
        friendImage.setAttribute("class", "friendImage");
        friendImage.setAttribute("src", "users/" + friends[i] + "/profilePic.jpg");
        friendDiv.appendChild(friendImage);
        friendArea.appendChild(friendDiv);
    }

HTML并不重要，但无论如何我都会包含它。

    .friends {
        width: 100%;
        height: 90%;
        overflow-x: hidden;
        overflow-y: auto;
    }
    .tools {
        width: 100%;
        height: 10%;
        box-shadow: 0px 0px 3px 1px #898989;
    }
    .friend {
        width: 100%;
        height: 20%;
        padding: 1%;
    }
    .friendImage {
        height: 80%;
        width: auto;
        border: medium #CCCCCC solid;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
    }

Answer 1

您并未将friendImage附加到friendDiv。

它应该是这样的：

  var friends = ["Test"];
    var friendArea = document.getElementById("friends");
    for (i=0; i < friends.length; i++) {
        var friendDiv = document.createElement("div");
        friendDiv.setAttribute("class", "friend");
        var friendImage = document.createElement("img");
        friendImage.setAttribute("class", "friendImage");
        friendImage.setAttribute("src", "users/" + friends[i] + "/profilePic.jpg");
        friendDiv.appendChild(friendImage);
        friendArea.appendChild(friendDiv);
    }

此外，请务必将此脚本放在HTML <body></body>标记的底部，以便在JavaScript尝试从页面中获取元素之前，HTML已加载整个文档。

Answer 2

你的脚本是否在标签中？您尝试此操作时是否还加载了文档？控制台说什么？它没有css吗？此外，如果照片路径不起作用，div中没有其他内容你尝试输出其他内容吗？

使用javascript创建和显示div

2 个答案: