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是无用的变量，它保存LanguageStatement5（newEl的返回值），使其成为函数并在loopo中调用

head

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为＆＃39; head＆＃39;得到父母。所以js马上就失败了。

即使您有一个名为＆＃39; head＆＃39;的元素，您也需要等到文档加载完毕。

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

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

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

希望这会帮助你。

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

4 个答案:

段