javascript - 给一个input元素前面插入一个图片为什么这么难？？？

其實你都用 jQuery 了，不如這樣做比較省事 :

jQuery 實現

$(function(){
    var src = "img/图片明/3.png";
    $image = $('<img>')
    $image.attr('src', src)
    $('input[type="checkbox"]').before($image)
})

jsFiddle

alert 為什麼出錯

其實這是一個立即執行函數(IIFE)的坑，你看你前面 alert 是不是沒加分號，在執行解析時

alert(j) 
(function(j){

// 省略

})(j)

變成

alert(j)(function(j){ // 省略 })(j)

看出詭異的地方沒有？

alert(j) 會先執行，所以你會看到正常 alert 出 0，但是執行完後別忘記後面還有個 (function(j){ // 省略 }) ，變成 alert(j)(...)，然而 alert 並不是回傳 function 而是 undefined ，所以會出錯，變成 undefined() 所以錯誤才會說 alert(...) is not a function

你直接測試一下 alert()() 就可以重現錯誤了，所以寫 IIFE 時要有習慣在前面加個;

alert(j) 
;(function(j){

// 省略

})(j)

我本来是想用jquery的，但是由于某原因不行，所以被迫用原生的，现在又出现这样的问题，只插入了一个图片，不知是什么原因 by 码农世界

好的，以下就是原生方法：

var src = "img/图片明/3.png";
var checkboxs = document.querySelectorAll('input[type="checkbox"]')
    
for(var i = 0, len = checkboxs.length ; i < len ; i++) {
    // 跑一個就要重新建立一個新的 img
    // 不然使用的都是同一個 img (同一個參考)
    var image = document.createElement('img')
    image.src = src
    checkboxs[i].parentNode.insertBefore(image, checkboxs[i])
}

至於為甚麼會只有最後一個，其實很簡單，你是建立一個 img 然後把他重複插入第一個第二個第三個 checkbox 前面，其實他們都是同一個東西，所以你其實是在把它放到第一個後，再挪走放到第二個，再挪走放到第三個，所以你執行完只會出現在第三個，解決辦法就是每個 checkbox 都建立一個 img 給他，詳情看代碼。