将按钮添加到跨度

Add button to span

本文关键字：添加 按钮      更新时间：2023-09-26

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

将onclick事件添加到动态添加的按钮？

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

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

将HTMLCollection转换为Array，并使用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>

当您调用getElementsByTagName时，会返回一个HTMLCollection。它就像一个Array，但它不是Array，所以它没有forEach方法。所以您必须使用call Array.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.

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

接下来，您必须实际创建函数。我想你想要两样东西之一：

  1. 一个集合函数，它将已经为使用它的环境创建，或者
  2. 一个动态函数，根据调用方的不同而有所不同

我将分别举一个小例子。

对于设置功能：

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

然后将按钮添加到跨度：

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
}

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

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

在没有jQuery的情况下工作：https://jsfiddle.net/tsclaus/b2by02yv/2/

相关文章：