Javascript 将按钮添加到span

我想为给定类的所有跨度添加一个按钮。这个问题的答案仍然是首选的解决方法吗（我一直看到答案被反驳为过时）

这是我的代码（到目前为止）：

---

当您调用

getElementsByTagName

时，会返回一个

HTMLCollection

。它就像一个数组，但它不是数组，所以它没有

forEach

方法。因此，您必须

调用

Array.prototype.forEach

要执行实际的追加操作，需要

节点#appendChild

，它将一个节点追加到另一个节点。但是，节点只能出现在DOM中的一个位置。如果将同一节点附加两次，它将从其位置移动到新位置。因此，每次都需要

克隆
按钮

总而言之：

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

我无法想象首选的方式，至少在生产中，不涉及jQuery。使用jQuery，代码将是：

$(function() {
    $("span.behavior-header-title").each( function(index, element) {
        element.append("<button></button")
    });
});

$（函数（）{
$（“span.behavior头标题”）。每个（函数（索引，元素）{
element.append（“将HTMLCollection转换为数组，并使用appendChild追加button元素：


var allspan=document.getElementsByTagName（'span'）；
[].slice.call（allspan）.forEach（函数（span）{
if（span.className===‘行为标题’）{
var button=document.createElement（'button'）；
button.innerText='addtest'；
span.appendChild（按钮）；
}
})；
您要做的是构建一个动态网页。虽然这应该更多地由PHP（PHP超文本处理器，一种被多个web服务器广泛支持的服务器端脚本语言）来完成，但有一个javascript解决方案

这个问题有多种解决方案，但我将为您提供实现这一目标所需的基本知识



您需要做的第一件事是使按钮具有
onclick
属性集。您可以这样做：

var button=document.createElement("BUTTON");
button.setAttribute("onclick","yourFunction()"); //Function Definition will go here.

这将使您的按钮在添加到文档时具有功能

接下来，您必须实际创建函数。我假设您需要以下两件事之一：

已为使用该函数的环境创建的集合函数，或
一个动态函数，根据调用方的不同而有所不同
我将给出每个方面的一个小例子

对于设置功能：

var button=document.createElement("BUTTON");
button.onclick = function(){
    //Event handling code.
};

对于动态功能（需要更多的努力）：

然后将按钮添加到范围：

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
}    

var span=document.getElementsByTagName（“span”）；//创建所有跨度的数组
对于（变量i=0；i
为什么你不能“想象”“最好的方法是不使用jQuery？jQuery仍然是JavaScript。@moogs我的意思是，包括jQuery可能会使加载时间增加0.1秒，而我的答案有你的一半的函数调用。我希望你的答案是讽刺。我很欣赏这个答案，但我尝试用JS来做。部分是为了学习JS。（不，我没有投你反对票）@拉米：如果我在意落选，我会删除我的答案（因为它会返回声誉）。我用相当简洁的代码编辑了我的答案。那应该是
slice.call（allspan）
？啊，明白了。抱歉。我试图翻译成我自己的代码。这对我不起作用，我也说不出原因。我没有理由相信这不起作用，但对我不起作用。你们在控制台中有错误吗？你们能提供一个JSFiddle和你们试图运行的代码吗？实际上它在JSFiddle中工作。一定是有问题html。我必须更仔细地看一下。我对你的答案投了反对票，因为混合使用JavaScript事件处理程序和html是不好的做法，例如使用
onclick
属性，它缺乏关注点的分离。你鼓励在setAttribute参数中以字符串形式编写函数，这显然是错误的做法最后，
var跨越[]=
不是你定义数组的方式。请在发布前测试你的代码。哦，对不起！我的答案通常更具概念性，只是包含了我试图理解的内容的本质。我将编辑我的答案。没问题！但是，很抱歉，我最近回到了Java，我认为在Java中，数组会出现混淆。
//...FUNCTION...//
function bFunc(/*parameters*/){
    /*Code (Using Parameters)*/
}

//...BUTTON...//

var button=document.createElement("BUTTON");
button.onclick = function(){
    bFunc(/*Any parameters needed*/);
};

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
}