Question

有人可以说明为什么这不起作用吗？

我的目标是创建一个列表输入类型并为每个类别分配一个类

var container = document.createElement('div');
container.setAttribute('id','Maincontainer');
document.body.append(container);


var count = ['class1','class2','class3','class4','class5'];
var i;
for( i = 0; i <= count.length; i++){
    container.innerHTML += '<input>';
}


count.forEach( function(){
    count = document.getElementsByTagName('input');
    count.setAttribute('class',i);
});

Answer 1

您想要将class数组中的count分配给每个输入元素吗？

然后在forEach的回调中，您需要分别为类名和相应的输入元素提供element和index。

此外，document.getElementsByTagName是一个数组，因此您需要知道索引要修改哪个输入元素，并查看forEach语义https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

您正在传递从最后一个for循环使用的i，它的值始终是第一个循环离开的值，它等于输入元素的数量减1

var inputElements = document.getElementsByTagName('input');

count.forEach(function(className, index){
    count = inputElements[index];
    count.setAttribute('class',className);
});

＆＃13;

var container = document.createElement('div');
container.setAttribute('id','Maincontainer');
document.body.append(container);


var count = ['class1','class2','class3','class4','class5'];
var i;
for( i = 0; i <= count.length; i++){
    container.innerHTML += '<input>';
}

var inputElements = document.getElementsByTagName('input');

count.forEach( function(className, index){
    count = inputElements[index];
    count.setAttribute('class',className);
});

＆＃13;

Answer 2

＆＃13;

var container = document.createElement('div');
container.setAttribute('id','Maincontainer');
document.body.append(container);


var count = ['class1','class2','class3','class4','class5'];
var i;
for( i = 0; i <= count.length; i++){
    container.innerHTML += '<input type="button">';
}


count.forEach( function(c, i){
    count1 = document.getElementsByTagName('input')[i];
    count1.setAttribute('class',c);
});

＆＃13;

Answer 3

我认为下一个代码是好方法：

let container = document.createElement('div');
container.setAttribute('id','Maincontainer');
let input = document.createElement('input');
let count = ['class1','class2','class3','class4','class5'];

for(let i = 0; i < count.length; i++){
  let cloneInput = input.cloneNode();
  cloneInput.classList.add(count[i]);
  container.appendChild(cloneInput);  
}

document.body.append(container);

此代码更快，因为conainer将所有childNode插入到文档中，并且DOM被重绘一次。如果使用createElement而不是innerHtml，本机代码会创建没有serrialize html的新元素，因此速度更快。我不会多次使用DOM中的elemet。您可以尝试使用foreach而不是loop for。

Answer 4

我建议将新创建的输入元素存储到变量中。

var inputElements = document.getElementsByTagName('input');

然后，在forEach函数中，为您所在的当前输入元素创建一个新变量，并将其类设置为存储在原始count数组中的className。

count.forEach(function (className, index) {
    var currentInputElement = inputElements[index];
    currentInputElement.setAttribute('class', className);
});

希望这有帮助！

使用JS创建动态输入类型

4 个答案: