<div>
<input type="checkbox"/>
</div>
<div>
<input type="checkbox"/>
</div>
<div>
<input type="checkbox"/>
</div>
<!-- ========================js部分===============================-->
<script>
$(function(){
var src1="img/图片明/3.png";
var img1=document.createElement("img");
img1.src=src1;
var inputs=document.getElementsByTagName("input");
var checkboxs=[];
for(var i=0,n=inputs.length;i<n;i++)
{
if(inputs[i].getAttribute("type")==="checkbox")
checkboxs.push(inputs[i]);//获取所有checkbox
}
for(var j=0,n=checkboxs.length; j<n; j++)
{
(function(j){
var pe=checkboxs[j].parentNode;
pe.insertBefore(img1,checkboxs[j]);
})(j)
}
})
</script>
问题是:为什么只有最后一个复选框的前面才能插入img元素????希望每个复选框前都能插入图片;求大神指点为什么会这样??
一个节点只能有一个父节点
所以要多次插入就必须创建多个 img 元素
var src1 = "img/图片明/3.png";
var inputs = document.getElementsByTagName("input");
var checkboxs = [];
for (var i = 0, n = inputs.length; i < n; i++) {
if (inputs[i].getAttribute("type") === "checkbox")
checkboxs.push(inputs[i]); //获取所有checkbox
}
for (var j = 0, n = checkboxs.length; j < n; j++) {
(function(j) {
var pe = checkboxs[j].parentNode;
var img1 = document.createElement("img");
img1.src = src1;
pe.insertBefore(img1, checkboxs[j]);
})(j)
}