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

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的返回值)，使其发挥作用并在loopo内部调用

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