我想为给定类的所有跨度添加一个按钮。这个问题的答案仍然是首选的方法吗（我一直看到答案因为过时而相互矛盾）？
adding onclick event to dynamically added button?
这是我的代码（到目前为止）：
var button = document.createElement("button");
button.innerText = "Add test";
var allSpans = document.getElementsByTagName('span');
allSpans.forEach(function(span) {
if(span.class == "behavior-header-title"){
span. //i'd like to call something like addElement(button) here
}
});
【问题讨论】：
标签： javascript html
将 HTMLCollection 转换为数组并使用 appendChild 附加按钮元素：
var allSpans = document.getElementsByTagName('span');
[].slice.call(allSpans).forEach(function(span) {
if(span.className === 'behavior-header-title') {
var button = document.createElement('button');
button.innerText = 'Add test';
span.appendChild(button);
}
});<span></span>
<span class="behavior-header-title"></span>
<span></span>
<span class="behavior-header-title"></span>【讨论】：
slice.call(allSpans)？
当您拨打getElementsByTagName 时，您会收到HTMLCollection。它就像一个数组，但它不是数组，所以它没有forEach 方法。所以你必须callArray.prototype.forEach。
要进行实际的附加，您需要Node#appendChild，它将一个节点附加到另一个节点。但是，节点只能出现在 DOM 中的一处。如果您两次附加相同的节点，它将从其位置移动到新位置。所以每次都需要clone这个按钮。
把它们放在一起：
var button = document.createElement("button");
button.innerText = "Add test";
var allSpans = document.getElementsByTagName('span');
Array.prototype.forEach.call(allSpans, function(span) {
if(span.className === 'behavior-header-title') {
span.appendChild(button.cloneNode(button))
}
});
【讨论】：
您要做的是构建一个动态网页。虽然这应该更多地留给 PHP（PHP 超文本处理器，一种被多个 Web 服务器广泛支持的服务器端脚本语言），但在 javascript 中有一个解决方案。
这个问题有多种解决方案，但我将为您提供实现此目标所需要做的基本基础知识。
您需要做的第一件事是使按钮具有onclick 属性集。你可以这样做：
var button=document.createElement("BUTTON");
button.setAttribute("onclick","yourFunction()"); //Function Definition will go here.
这将使您的按钮在添加到文档时具有功能。
接下来，您必须实际创建函数。我假设您想要以下两件事之一：
我将分别举一个小例子。
对于set函数：
var button=document.createElement("BUTTON");
button.onclick = function(){
//Event handling code.
};
对于动态功能（多一点努力）：
//...FUNCTION...//
function bFunc(/*parameters*/){
/*Code (Using Parameters)*/
}
//...BUTTON...//
var button=document.createElement("BUTTON");
button.onclick = function(){
bFunc(/*Any parameters needed*/);
};
然后将按钮添加到span中：
var spans = document.getElementsByTagName("span"); //CREATE ARRAY OF ALL SPANS
for(var i = 0; i < spans.length; i++){
spans[i].appendChild(button); //APPEND THE BUTTON TO EACH SPAN
}
【讨论】：
onclick 属性，它缺乏关注点分离。您鼓励在 setAttribute 参数中将函数编写为字符串，这绝对是错误的方法。最后var spans[] = 不是你定义数组的方式。请在发布之前测试您的代码。
我无法想象首选方式，至少在生产中，不涉及 jQuery。使用 jQuery，代码将是：
$(function() {
$("span.behavior-header-title").each( function(index, element) {
element.append("<button></button")
});
});
没有 jQuery 的工作小提琴：https://jsfiddle.net/tsclaus/b2by02yv/2/
【讨论】：