javascript - 这么一个简单的问题为什么就行不通呢？？

问题描述

问 题

    <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)
} 

这篇关于javascript - 这么一个简单的问题为什么就行不通呢？？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！