<ul id="customUl" class="line lineL"> <li class="line lineG1"> <label class="des desA">{%label.customLable1%}</label> <input id="custom1" class="textInput text textA1" maxlength="16"/><i class="tip"></i> <label id="custom1Tips" class="customTips" for="custom1">{%label.customTips%}</label> </li> <li class="line lineG1"> <label class="des desA">{%label.customLable2%}</label> <input id="custom2" class="textInput text textA1" maxlength="16"/><i class="tip"></i> <label id="custom2Tips" class="customTips" for="custom2">{%label.customTips%}</label> </li> <li class="line lineG1"> <label class="des desA">{%label.customLable3%}</label> <input id="custom3" class="textInput text textA1" maxlength="16"/><i class="tip"></i> <label id="custom3Tips" class="customTips" for="custom3">{%label.customTips%}</label> </li> <li class="line lineG1"> <label class="des desA">{%label.customLable4%}</label> <input id="custom4" class="textInput text textA1" maxlength="16"/><i class="tip"></i> <label id="custom4Tips" class="customTips" for="custom4">{%label.customTips%}</label> </li> </ul>使用js语言改成for循环的方式
时间: 2023-07-03 20:22:26 浏览: 41
可以使用以下代码将上述HTML代码改写成for循环的方式:
```javascript
const labels = ['customLable1', 'customLable2', 'customLable3', 'customLable4'];
const inputs = ['custom1', 'custom2', 'custom3', 'custom4'];
const tips = ['customTips', 'customTips', 'customTips', 'customTips'];
const ul = document.createElement('ul');
ul.id = 'customUl';
ul.classList.add('line', 'lineL');
for(let i = 0; i < labels.length; i++) {
const li = document.createElement('li');
li.classList.add('line', 'lineG1');
const label = document.createElement('label');
label.classList.add('des', 'desA');
label.textContent = `{%label.${labels[i]}%}`;
li.appendChild(label);
const input = document.createElement('input');
input.id = inputs[i];
input.classList.add('textInput', 'text', 'textA1');
input.maxLength = 16;
li.appendChild(input);
const tip = document.createElement('i');
tip.classList.add('tip');
li.appendChild(tip);
const labelTip = document.createElement('label');
labelTip.id = `${inputs[i]}Tips`;
labelTip.classList.add('customTips');
labelTip.setAttribute('for', inputs[i]);
labelTip.textContent = `{%label.${tips[i]}%}`;
li.appendChild(labelTip);
ul.appendChild(li);
}
```
这样可以通过循环生成四个input元素,避免了代码的重复。