循环内部函数不会将内容附加到父级

Question

我正在尝试使用函数内的循环将内容附加到父元素。 我想将几个 div 附加到一个元素，但（显然）希望能够灵活地更改类名、文本等内容。 这是我的代码：

var head = document.getElementById('head');

var someText = "Hello, World";
var someAttributes = [['class', 'blue'], ['id', 'footer'], ['name', 'bunk']];


function createEl(tag, parent)  {
  var newElement = document.createElement(tag);
  return parent.appendChild(newElement);
}

function addText(text, parent) {
  return parent.textContent = text;
}
function addAttribute(attributes, parent) {
  for(var i = 0; i < attributes.length; i++) {
    parent.setAttribute(attributes[i][0], attributes[i][1]);
  }
}

function newEl(parent, element, attr, text) {
  var el = createEl(element, parent);
  addText(text, el);
  addAttribute(attr, el);
  return parent;
}

var derp = newEl(head, 'div', someAttributes, someText);

function loop(num, content) {
  for(var i = 0; i < num; i++)  {
    content;
    console.log('derp');
  }
}

loop(3, derp);

如果我将它更改为以下内容，我可以让它工作：

function loop(num, a, b, c, d) {
  for(var i = 0; i < num; i++)  {
    content newEl(a, b, c, d);
    console.log('derp');
  }
}

loop(3, head, 'div', someAttributes, someText);

为什么它不适用于loop(3, derp)

Answer 1

derp 是一个无用的变量，它持有head（newEl 的返回值），让它起作用并在循环中调用

var derp = function(){
  return newEl(head, 'div', someAttributes, someText);
};

function loop(num, content) {
  for(var i = 0; i < num; i++)  {
    content(); // <== call function derp here
    console.log('derp');
  }
}

loop(3, derp);

Answer 2

创建一个函数并循环该函数中的所有内容。为了跟踪每个元素，将它们推入一个数组。请记住，id 必须是唯一的，因此addAttribute() 将使您的 HTML 无效，因为每个元素都将具有相同的 id。顺便说一句，尽量避免循环中的函数，它会变得混乱。

片段

var base = document.createElement('main');
document.body.appendChild(base);

var tag = "div";
var str = " reporting for duty, sir!";
var att = [['class', 'infantry'], ['name', 'trooper']];
var cnt = 0;
var qty = 3;
var ico = 'https://cdn2.iconfinder.com/data/icons/starwars/icons/128/clone-4.png';

function cloneLab(tag, str, att, qty) {

  var unit = [];

  for(var i = 0; i < qty; i++)  {
    var trooper = document.createElement(tag);
    
    unit.push(trooper);
    cnt++;
    unit[i].id = 'trooper'+cnt;
    for(var j = 0; j < att.length; j++) {
      trooper.setAttribute(att[j][0], att[j][1]);
    }
    trooper.textContent = unit[i].id + str;
    trooper.style.backgroundImage = "url("+ico+")";
    base.appendChild(unit[i]);
  }
  return unit;
}

cloneLab(tag, str, att, qty);

main { border: 5px inset grey; }
.infantry { border: 1px solid blue; background-repeat: no-repeat; background-position: center; background-size: contain; }

Answer 3

您可以使用Object.create(derp); 来构建继承自derp 的新对象

var head = document.getElementById('head');

var someText = "Hello, World";
var someAttributes = [
  ['class', 'blue'],
  ['id', 'footer'],
  ['name', 'bunk']
];


function createEl(tag, parent) {
  var newElement = document.createElement(tag);
  return parent.appendChild(newElement);
}

function addText(text, parent) {
  return parent.textContent = text;
}

function addAttribute(attributes, parent) {
  for (var i = 0; i < attributes.length; i++) {
    parent.setAttribute(attributes[i][0], attributes[i][1]);
  }
}

function newEl(parent, element, attr, text) {
  var el = createEl(element, parent);
  addText(text, el);
  addAttribute(attr, el);
  return parent;
}

var derp = newEl(head, 'div', someAttributes, someText);



function loop(num, content) {
  for (var i = 0; i < num; i++) {
    newEl(head, 'div', someAttributes, someText);
    Object.create(derp);
  }
}

loop(3, derp);

.blue {
  color: blue;
}

<div id="head" />

Answer 4

这里的代码很少有问题。

首先，您没有 ID 为“head”的元素作为父元素。所以js马上就失败了。

即使你有一个名为'head'的元素，你也需要等到文档加载完毕。

如果你要使用纯 js，你可以使用 jQuery document.ready 函数或 document.addEventListener("DOMContentLoaded", function(event) { });。您可以将代码复制到上述这些函数中。

如果您按照这些步骤操作，您的代码将完美运行。

PS：请注意document.addEventListener("DOMContentLoaded", function(event) { }); 可能不适用于 IE。

希望这会对您有所帮助。