有没有一种方法可以创建一个元素并将其发送到 "appendChild" 的另一个函数？

Question

我创建了一个函数变量。此函数正在创建一个元素，应用样式和 returns 函数内的变量。

我后来有一个 for 循环，它有一个 "if"，想通过使用 "appendChild" 将该元素添加到已经存在的 div，但我没能做到这行得通。

有什么建议吗？

var wall = function () {

    var tmp_wall = document.createElement('div');

    document.getElementById("g_world").appendChild(tmp_wall);
}

var ground = function () {

    var tmp_ground = document.createElement('div');

    document.getElementById("g_world").appendChild(tmp_ground);
}

// *****************************************************************

var world = [
    [1,1],
    [2,2],
];

function drawWorld () {

    for(var y = 0; y < world.length; y++) {

        for(var x = 0; x < world[y]; x++) {

            if(world[y][x] === 1) {
                wall();
            }
            else if (world[y][x] === 2) {
                ground();
            }
        }
        document.getElementById('g_world').innerHTML += '<br>';
    }
}

Answer 1

这看起来有点奇怪：

document.getElementById('g_world') += document.body.appendChild(ground);

appendChild 是这样工作的：

document.getElementById('g_world').appendChild(ground());

你能试试看是否有效吗？

此外，您的脚本不会在 return 语句之后继续。也许您的示例代码中缺少一些分号？

编辑：你的问题在第二个for-loop。您忘记添加 .length，像这样：

for(var x = 0; x < world[y].length; x++) {

Answer 2

我注意到你的代码中有一些东西，它们可能有用也可能没用。

第一点是您要返回 return tmp_wall 是什么让您的代码在那之后没有运行。

第二点是您的代码中有一个闭包，您应该调用它以正确使用它。

第三点是您没有尝试附加您创建的元素 tmp_wal。

您不能多次将相同的元素添加到 dom 中，解决方法是使用 cloneNode() 或为 for() 的每次迭代创建新元素。

闭包drawWorld还缺少一些关闭标签。

我会只使用 JS 来处理它，但我决定尽可能少地更改以提供您想要的网格。

我会做以下事情：


var wall = function() {
//   var tmp_wall = document.createElement("div");

//   tmp_wall.style.width = 50 + "px";
//   tmp_wall.style.height = 50 + "px";
//   tmp_wall.style.backgroundColor = "green";
//   tmp_wall.className = "wall";

  var world = [
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    [1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1],
    [1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1],
    [1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1],
    [1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1],
    [1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1],
    [1, 2, 2, 2, 2, 2, 5, 2, 2, 2, 2, 2, 1],
    [1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1],
    [1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1],
    [1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1],
    [1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1],
    [1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1],
    [1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1]
  ];

  const gWorldElement = document.getElementById("g_world");

  function drawWorldContainer() {
    for (let i = 0; i < world.length; i++) {
      const newElementI = document.createElement("div");
      gWorldElement.appendChild(newElementI);
      for (let j = 0; j < world[i].length; j++) {
        const newElementJ = document.createElement("div");
        gWorldElement.children[i].appendChild(newElementJ);
        newElementJ.innerText = world[i][j];
      }
    }
  }

  drawWorldContainer();
};

wall();

如果您将 g_world 元素设置为 flex，结果，您将拥有 网格布局 div 容器和其他 div 保存值。

然后您可以创建另一个检查，例如 if(world[i][j] === 1) 检查值并相应地添加类名或更改元素的样式标签。

我希望我没有对您的代码进行太多更改，并且您仍然能够找到您的解决方案，如果您有任何问题，请告诉我。

有没有一种方法可以创建一个元素并将其发送到 "appendChild" 的另一个函数？

Is there a way of creating an element and sending it to another function that "appendChild"?

javascript

appendchild

createelement