我有以下设置。在这里,我试图添加自定义收音机和复选框。
Array.from(document.querySelectorAll("tr")).forEach((tr,index)=>{
var mark=document.createElement("span");
Array.from(tr.querySelectorAll("input")).forEach((inp,index1)=>{
if(inp.type=="radio"){
mark.classList.add("dotmark");
inp.parentNode.appendChild(mark);
}
else{
mark.classList.add("checkmark");
inp.parentNode.appendChild(mark);//instead append in to the next td's label tag
}
})
})
span{
width:20px;
height:20px;
background:#ccc;
display:inline-block;
}
<table id="tab1" class="table labelCustom">
<tbody>
<tr><td><input type='radio' id='one' name='name'></td><td><label for='one'>example</label></td></tr>
<tr><td><input type='radio' id='two' name='name'></td><td><label for='two'>example</label></td></tr>
<tr><td><input type='radio' id='three' name='name'></td><td><label for='three'>example</label></td></tr>
</tbody>
</table>
我希望将以动态方式创建的span元素插入到label标签中。现在将其插入输入td中。
注意:span元素的类取决于输入类型。
最佳答案
其中一种方法是:
Array.from(document.querySelectorAll("tr")).forEach((tr, index) => {
var mark = document.createElement("span");
Array.from(tr.querySelectorAll("input")).forEach((inp, index1) => {
// caching the <label> element for readability:
let label = inp.parentNode.nextElementSibling.querySelector('label');
// adding the class-name based on the result of the ternary operator,
// if the input.type is equal to 'radio' we return the class-name of
// 'dotmark', otherwise we return 'checkmark':
mark.classList.add(inp.type === 'radio' ? 'dotmark' : 'checkmark');
// appending the element held within the 'mark' variable:
label.appendChild(mark);
})
})
span {
width: 20px;
height: 20px;
background: #ccc;
display: inline-block;
}
span.dotmark {
background-color: limegreen;
}
span.checkmark {
background-color: #f90;
}
<table id="tab1" class="table labelCustom">
<tbody>
<tr>
<td><input type='radio' id='one' name='name'></td>
<td><label for='one'>example</label></td>
</tr>
<tr>
<td><input type='radio' id='two' name='name'></td>
<td><label for='two'>example</label></td>
</tr>
<tr>
<td><input type='radio' id='three' name='name'></td>
<td><label for='three'>example</label></td>
</tr>
<tr>
<td><input type='checkbox' id='four' name='differentName'></td>
<td><label for='four'>example</label></td>
</tr>
</tbody>
</table>
作为增编,从OP的评论到问题:
我尝试了
nextSibling
,但是它不起作用,但是nextSiblingElement
起作用了。两者之间的区别在于
nextSibling
返回任何同级节点,无论是文本节点,元素节点还是其他节点,而nextElementSibling
顾名思义,返回下一个同级节点,也就是元素节点。参考文献:
Element.querySelector()
。Node.nextSibling
。NonDocumentTypeChildNode.nextElementSibling
。