如何将按钮添加到具有相同类别的每个节点

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!")}); 
}