javascript - 使用 javascript 创建和显示 div

Question

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

相关 JavaScript(现在位于页面底部):

    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);
    }

相关 CSS:

    .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%;
    }

HTML 并不是很重要，但我还是会包含它。

    <div class="window">
        <div class="rightCorner">
            <img src="images/pPicTemp.png" id="profilePic">
        </div>
        <div class="holder" id="profileData">
            <span id="name"></span>
    </div>
    <div class="sideBar">
        <div class="friends" id="friendsDiv">

        </div>
        <div class="tools">

        </div>
    </div>

Answer 1

您的脚本是否在标签中？当您尝试这样做时，文档是否也已加载？控制台显示什么？它没有CSS吗？此外，如果照片路径不起作用，则 div 中没有其他内容，您是否尝试输出其他内容？