Add button to span

Question

I'd like to add a button to all spans with a given class. Is the answer in this question still the preferred way of doing it (I keep seeing answers get contradicted as out of date)?

adding onclick event to dynamically added button?

Here is my code (so far):

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

Answer 1

When you call getElementsByTagName, you get back an HTMLCollection. It's like an Array, but it's not an Array, so it doesn't have a forEach method. So you'll have to call Array.prototype.forEach.

To do the actual appending, you want Node#appendChild, which appends a Node to another Node. However, Nodes can only appear one place in the DOM. If you append the same Node twice, it will get moved from its location to the new location. So you need to clone the button each time.

Putting it all together:

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

Answer 2

Convert the HTMLCollection to an Array and append the button element with 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>

Answer 3

What you are trying to do is build a dynamic web page. While this should be left moreso to PHP (PHP Hypertext Processor, a serverside scripting language widely supported by multiple web servers), there is a solution in javascript.

There are multiple solutions to this problem, but I will give you the barebone basics of what you will need to do in order to achieve this.

The first thing that you need to do is make the button have a onclick attribute set. You can do this like so:

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

This will make it so your button will have functionality when added to the document.

Next, you must actually create the function. I assume that you want one of two things:

1. A set function, which would be already created for the environment in which it is used, or
2. A dynamic function, one that would be different based on the caller.

I will give a small example of each.

For the set function:

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

For the dynamic function (A little more effort):

//...FUNCTION...//
function bFunc(/*parameters*/){
    /*Code (Using Parameters)*/
}

//...BUTTON...//

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

And then add the button to the 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
}    

Answer 4

I can't imagine that the preferred way, at least in production, doesn't involve jQuery. With jQuery, the code would be:

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

Working fiddle without jQuery: https://jsfiddle.net/tsclaus/b2by02yv/2/