我想在给定班级的所有跨度中添加一个按钮。这个问题的答案仍然是这样做的首选方式(我一直认为答案是过时的矛盾)?
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
}
});
答案 0 :(得分:2)
当您致电getElementsByTagName
时,您会收到HTMLCollection
。它就像一个数组,但它不是一个数组,所以它没有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))
}
});
答案 1 :(得分:2)
将HTMLCollection转换为数组,并使用appendChild:
追加button元素
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>
&#13;
答案 2 :(得分:1)
您要做的是构建一个动态网页。虽然这应该留给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*/);
};
然后将按钮添加到范围:
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
}
答案 3 :(得分:-3)
我无法想象,至少在生产中,首选方式不涉及jQuery。使用jQuery,代码将是:
$(function() {
$("span.behavior-header-title").each( function(index, element) {
element.append("<button></button")
});
});
没有jQuery的小提琴:https://jsfiddle.net/tsclaus/b2by02yv/2/