Javascript createElement或appendChild不工作

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

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

var playfield=document.getElementById（“playfield”）；
var指数=[0,1,2,3,4,5,6,7,8,9,10,11]；
洗牌（索引）；
对于（变量i=0；i<12；i++）{
var vak1=document.createElement（“span”）；
var kaart1=document.createElement（“img”）；
var path1=“img/kaart”+索引[i]+“.png”；
var klasse1=“img”+指数[i]；
kaart1.setAttribute（“src”、“img/achterkant.png”）；
kaart1.setAttribute（“类”，klasse1）；
kaart1.setAttribute（“数据img”，路径1）；
kaart1.setAttribute（“高度”、“150”）；
kaart1.setAttribute（“宽度”、“150”）；
kaart1.setAttribute（“数据转换”、“假”）；
游戏场。appendChild（vak1.appendChild（kaart1））；
}

操场。appendChild（vak1.appendChild（kaart1））是问题行。
vak1.appendChild（kaart1）
的结果是追加的子级
kaart1
-分别执行以下两个操作：

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

playfield.appendChild（vak1.appendChild（kaart1））是问题行。
vak1.appendChild（kaart1）
的结果是追加的子级
kaart1
-分别执行以下两个操作：

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

var playfield=document.getElementById（“playfield”）；
var指数=[0,1,2,3,4,5,6,7,8,9,10,11]；
对于（变量i=0；i<12；i++）{
var vak1=document.createElement（“span”）；
var kaart1=document.createElement（“img”）；
var path1=“img/kaart”+索引[i]+“.png”；
var klasse1=“img”+指数[i]；
//kaart1.setAttribute（“src”、“img/achterkant.png”）；
kaart1.setAttribute（“类”，klasse1）；
kaart1.setAttribute（“数据img”，路径1）；
kaart1.setAttribute（“高度”、“150”）；
kaart1.setAttribute（“宽度”、“150”）；
kaart1.setAttribute（“数据转换”、“假”）；
vak1.附属儿童（kaart1）
游戏场。附属物儿童（vak1）；
}

附加到第一个，然后将其添加到playfield。
var playfield=document.getElementById（“playfield”）；
var指数=[0,1,2,3,4,5,6,7,8,9,10,11]；
对于（变量i=0；i<12；i++）{
var vak1=document.createElement（“span”）；
var kaart1=document.createElement（“img”）；
var path1=“img/kaart”+索引[i]+“.png”；
var klasse1=“img”+指数[i]；
//kaart1.setAttribute（“src”、“img/achterkant.png”）；
kaart1.setAttribute（“类”，klasse1）；
kaart1.setAttribute（“数据img”，路径1）；
kaart1.setAttribute（“高度”、“150”）；
kaart1.setAttribute（“宽度”、“150”）；
kaart1.setAttribute（“数据转换”、“假”）；
vak1.附属儿童（kaart1）
游戏场。附属物儿童（vak1）；
}

附加到第一个，然后将其添加到游戏场。
您正在将创建的
作为子项添加到
#playfield
。如果你想把它放在
中，你必须将它添加到
中，然后将
添加到
#playfield
你要将作为孩子创建的
添加到
#playfield
中。如果你想把它放在
中，你必须将它添加到
和中，然后将
添加到
#playfield