Javascript 循环数组并在标签后创建表单输入标记

我试图循环一个数组来创建一些表单标记，具体取决于数组中有多少个值。到目前为止，我已经得到了正在创建的标签和输入标签。我遇到的问题是在标签之后正确显示输入标签。任何帮助都将不胜感激

我正在努力实现：

<label class="material-label" for="leather_materials">
<input id="leather_materials" class="shoe-materials" type="radio" name="materials" value="leather">
<label class="material-label" for="suade_materials">
<input id="suade_materials" class="shoe-materials" type="radio" name="materials" value="suade">
<label class="material-label" for="nubuck_materials">
<input id="nubuck_materials" class="shoe-materials" type="radio" name="materials" value="nubuck">

到目前为止，我的代码是：

materialArray = ['leather','suade','nubuck'];

//loop over material array 
for( i = 0; i < materialArray.length;  i++) {

    //create label elements
    var matLabel = document.createElement('label');
    matLabel.setAttribute('for', materialArray[i] + '_materials');
    matLabel.setAttribute('class', 'material-label');
    console.log(matLabel);

    //add text to label elements
    var matLabelTextNode = document.createTextNode(materialArray[i]);
    matLabel.appendChild(matLabelTextNode);

    //create input elements
    var matInput = document.createElement('input');
    matInput.className = 'shoe-materials';
    matInput.setAttribute('class', 'shoe-materials');
    matInput.setAttribute('id', materialArray[i] +'_materials');
    matInput.setAttribute('name', 'materials');
    matInput.setAttribute('type', 'radio');
    matInput.setAttribute('value', materialArray[i]);
    console.log(matInput);   

    //append to parent div
    addMaterials.appendChild(matLabel);    
    $('.material-label').after(matInput);        
}

materialArray=[‘皮革’、‘苏亚德’、‘牛磨砂革’]；
//环绕材料阵列
对于（i=0；i

我尝试使用jQuery after（），但它有点混乱，并得到以下结果

<label class="material-label" for="leather_materials">leather</label>
<input id="nubuck_materials" class="shoe-materials" type="radio" name="materials" value="nubuck">
<input id="suade_materials" class="shoe-materials" type="radio" name="materials" value="suade">
<input id="leather_materials" class="shoe-materials" type="radio" name="materials" value="leather">
<label class="material-label" for="suade_materials">suade</label>
<input id="nubuck_materials" class="shoe-materials" type="radio" name="materials" value="nubuck">
<input id="suade_materials" class="shoe-materials" type="radio" name="materials" value="suade">
<label class="material-label" for="nubuck_materials">nubuck</label>
<input id="nubuck_materials" class="shoe-materials" type="radio" name="materials" value="nubuck">

皮革
苏亚德
努巴克

您所犯的错误是在

.material标签

元素之后附加这些元素。因此，您可以在已经具有该类的标签之后继续添加它们

发件人：

$('.material-label').after(matInput);

$(matLabel).after(matInput);

至：

$('.material-label').after(matInput);

$(matLabel).after(matInput);

更新代码：

var addMaterials=document.getElementById（“addMaterials”）；
materialArray=[‘皮革’、‘苏亚德’、‘牛磨砂革’]；
//环绕材料阵列
对于（i=0；i

---

将“.material label”更改为matLabel

$(matLabel).after(matInput);  

---

这是JSIDLE:

jQuery语句

$（'.material label'）

选择该类的每个元素，因此当您使用

$（'.material label'）。在（matInput）

之后，您将在三个标签之后添加matInput的内容

要获取当前标签，只需使用

i

作为

$（'.material label'）

返回的数组的索引

改变

//append to parent div
addMaterials.appendChild(matLabel);
$('.material-label').after(matInput);

到

---

将得到您想要的结果。

我从来都不喜欢用对象操作方法来构建html。我喜欢构建html字符串，然后将其插入dom。只是我的意见

JS

//仅首字母大写
String.prototype.toUpperCaseFirstLetter=函数（）{
var s=此；
返回s.length>0？s.charAt（0）.toUpperCase（）+s.slice（1）：s；
}
var materialArray=[‘皮革’、‘苏亚德’、‘牛磨砂革’]；
函数buildMaterialRadios（）{
var-str=''；
对于（变量i=0；i

HTML

---

我不敢相信这会那么容易！我一直在拔头发。非常感谢你

<form name="shoebuilderform">

<div id="material_selections"></div>

</form>