Question

我正在尝试将img元素放在我使用JavaScript动态创建的span元素中。问题是span元素没有显示在DOM树中。但是，img元素显示在页面上并嵌套在我的html代码中硬编码的div元素（#playfield）中。我真的不知道我做错了什么。

var playfield = document.getElementById("playfield");
var indexes = [0,1,2,3,4,5,6,7,8,9,10,11];
shuffle(indexes);

for (var i = 0; i < 12; i++) {
    var vak1 = document.createElement("span");
    var kaart1 = document.createElement("img");
    var path1 = "img/kaart" + indexes[i] + ".png";
    var klasse1 = "img" + indexes[i];
    kaart1.setAttribute("src", "img/achterkant.png");
    kaart1.setAttribute("class", klasse1);
    kaart1.setAttribute("data-img", path1);
    kaart1.setAttribute("height", "150");
    kaart1.setAttribute("width", "150");
    kaart1.setAttribute("data-turned","false");
    playfield.appendChild(vak1.appendChild(kaart1));
 }

Answer 1

playfield.appendChild(vak1.appendChild(kaart1));问题就在于此。 vak1.appendChild(kaart1)的结果是附加的子kaart1 - 分别执行以下两项操作：

vak1.appendChild(kaart1);
playfield.appendChild(vak1);

Answer 2

var playfield = document.getElementById("playfield");
var indexes = [0,1,2,3,4,5,6,7,8,9,10,11];


for (var i = 0; i < 12; i++) {
    var vak1 = document.createElement("span");
    var kaart1 = document.createElement("img");
    var path1 = "img/kaart" + indexes[i] + ".png";
    var klasse1 = "img" + indexes[i];
    //kaart1.setAttribute("src", "img/achterkant.png");
    kaart1.setAttribute("class", klasse1);
    kaart1.setAttribute("data-img", path1);
    kaart1.setAttribute("height", "150");
    kaart1.setAttribute("width", "150");
    kaart1.setAttribute("data-turned","false");
    vak1.appendChild(kaart1)
    playfield.appendChild(vak1);
 }

追加到第一个，然后将其添加到游戏区。

Answer 3

您将创建的<img>作为孩子添加到#playfield。如果您想要<span>，则必须将其添加到<span>和然后将<span>添加到#playfield

createElement或appendChild不起作用

3 个答案: