有没有办法创建一个元素并将其发送到另一个“appendChild”函数？答案

【问题标题】：Is there a way of creating an element and sending it to another function that "appendChild"?有没有办法创建一个元素并将其发送到另一个“appendChild”函数？
【发布时间】：2019-05-25 05:58:50
【问题描述】：

我创建了一个变量，它是一个函数。该函数正在创建一个元素，应用样式并返回函数内的变量。

我后来有一个 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>';
    }
}

【问题讨论】：

return tmp_wall; 之后的代码都不会运行。这应该是函数的结尾吗？
你的代码不会做太多事情；它返回tmp_wall，之后不再运行任何代码。请提供minimal reproducible example。您可以使用Stack Snippets 这样做。
你在哪里调用wall()函数？
见document.getElementById('g_world') += document.g_world.appendChild(wall);我认为你试图在那里调用你的wall函数，但你必须使用wall()。
您的代码 sn-p 不完整。请发布完整的代码 sn-p。

标签： javascript appendchild createelement

【解决方案1】：

这看起来有点奇怪：

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

appendChild 是这样工作的：

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

你能试试看是否有效吗？

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

编辑：您的问题出在第二个 for 循环中。你忘了加.length，像这样：

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

【讨论】：

我更新了文字，以便更容易理解我想要实现的目标！编辑：不，没有成功。
墙/地面元素没有被添加到世界中？您的浏览器控制台中是否有任何 JavaScript 错误？
不，我尝试重写代码。我会更新它，但没有结果。
试试wall() 和ground()。执行函数返回元素。我更新了我的答案。
我现在都试过了。在函数中包含“document.getElementById().appendChild()”并通过在“if”中简单地声明“wall()”来执行它，但似乎没有任何效果。

【解决方案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)，检查值并相应地添加类名或更改元素的样式标记。

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

【讨论】：