Question

createElement 或 appendChild 不起作用

2016-03-16

656

javascript

我试图将 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 - 分别执行这 2 个操作：

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 。