我正在尝试使用函数内的循环将内容附加到父元素。 我想将几个 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)一起使用
最佳答案
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);
关于javascript - 函数内部循环不会将内容附加到父级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37639486/