如何將按鈕添加到具有相同類別的每個節點

Question

我正在嘗試製作Google Chrome擴展程序，該擴展程序在執行特定操作的每條評論旁都提供了一個按鈕。評論沒有html id，所以我在我的內容腳本文件中做了這個。

var cFooter = document.getElementsByClassName("comment-renderer-footer"); 
var btn = document.createElement("button");   
var txt = document.createTextNode("does something");  
btn.appendChild(txt); 


for(var i = 0 ; i<cFooter.length ; i++){ 
    cFooter.item(i).appendChild(btn); 
} 

btn.addEventListener("click", function(){ alert("You Clicked!")}); 

此代碼應該列出所有評論，然後向每個評論添加一個按鈕，但它不起作用。

（cFooter代表評論頁腳，我想按鈕被旁邊的厭惡按鈕。）

清單文件：

"name": "Youtube Comments ", 
"description": "Youtube Comments, 
"version": "1.0", 

"manifest_version": 2, 

"browser_action":{ 
    "default_icon": "icon.png", 
    "default_popup": "popup.html" 
    }, 

    "background": { 
    "scripts": ["background.js"], 
    "persistent": false 
    }, 

    "icons" : { 
    "64" : "icon.png" 
    }, 

    "permissions": ["activeTab"], 

    "content_scripts": [ 
    { 
    "matches": ["https://www.youtube.com/*"], 
    "js": ["myScript.js"] 
    } 
    ] 
} 

Answer 1

最後一個按鈕應現在的工作已經（如果你會改變cFooter.item(i)至cFooter[i]）。下面是所有的人都可以工作，通過不只是他們的最後一個分配click處理每一個按鈕，：

var cFooter = document.getElementsByClassName("comment-renderer-footer"); 
for(var i = 0 ; i<cFooter.length ; i++){ 
    var btn = document.createElement("button");   
    var txt = document.createTextNode("does something");  
    btn.appendChild(txt); 
    cFooter[i].appendChild(btn); 
    btn.addEventListener("click", function(){ alert("You Clicked!")}); 
}