javascript - 使用 javaScript 在循环中使用具有 html 元素的变量

Question

我正在创建有 2 个 div 的表单，每个 div 有 1 个标签和 1 个文本框。我如何在 for 循环中使用创建的标签和文本框变量。指导我。

标签和文本框

var lbl1 = document.createElement(Label);
lbl1.innerHTML = "First Name";


var lbl2 = document.createElement(Label);
lbl2.innerHTML = "Last Name";


var elm1 = document.createElement(InputElement);
elm1.setAttribute("type", "text");


var elm2 = document.createElement(InputElement);
elm2.setAttribute("type", "text");

var signUpForm = document.createElement("form");
signUpForm.setAttribute("id", "signUpForm");

document.body.appendChild(signUpForm);
var getSignUpForm = document.getElementById('signUpForm');
for(var i = 1 ; i<= 2;i++)
{
    Div = document.createElement("div");
    for(var j=1;j<2;j++)
    {
        Div.appendChild("lbl"+j);
        Div.appendChild("elm"+j);
        getSignUpForm.appendChild(Div);
    }
}

"lbl"+j 视为字符串而不是 elemt

Answer 1

使用object来保存变量，并使用方括号表示obj["lbl"+ j]。就像下面这样。

var Label = 'label';
var InputElement = 'input';
var obj = {};
obj.lbl1 = document.createElement(Label);
obj.lbl1.innerHTML = "First Name";

obj.lbl2 = document.createElement(Label);
obj.lbl2.innerHTML = "Last Name";

obj.elm1 = document.createElement(InputElement);
obj.elm1.setAttribute("type", "text");

obj.elm2 = document.createElement(InputElement);
obj.elm2.setAttribute("type", "text");

var signUpForm = document.createElement("form");
signUpForm.setAttribute("id", "signUpForm");

document.body.appendChild(signUpForm);
var getSignUpForm = document.getElementById('signUpForm');
for (var i = 1; i <= 2; i++) {
  Div = document.createElement("div");
  for (var j = 1; j <= 2; j++) {
    Div.appendChild(obj["lbl" + j]);
    Div.appendChild(obj["elm" + j]);
  }
  getSignUpForm.appendChild(Div);
}