javascript button not showing in IE

Question

The following code creates a blue button at one end of a table row that links to a detail page for the client that you are one (the row you are on). This code works in Firefox but in Internet Explorer no buttons show, so you cannot get to the detail page. Can someone suggest a solution to this that would work in both IE and Firefox?

$('#account-table tbody tr').each( function () {
        //nCloneTd.innerHTML = '<a href="../two/'+this.id+'"><button class="btn   btn-mini btn-primary" type="button">Detail</button></a>';
        nCloneTd.innerHTML = '<a href="'+this.id+'"><button class="btn btn-mini   btn-primary" type="button">Detail</button></a>';
        nCloneTd.id = "detail_cell";
        nCloneTd.className = "center";
        nCloneTd.bgColor = "white"
        this.insertBefore(  nCloneTd.cloneNode( true ),   this.childNodes[this.childNodes.length] );
      });

One of the answers asked what did the dev tools console say about the page/error. After looking at the dev tools console in IE, I found that the problem lay with this line ...

$('#account-table thead tr').each( function () {
            this.insertBefore( nCloneTh, this.childNodes[this.childNodes.length] );
            });

Changing ...

this.insertBefore( nCloneTh, this.childNodes[this.childNodes.length] );

to be ...

this.insertBefore( nCloneTh);

and ...

this.insertBefore(  nCloneTd.cloneNode( true ), this.childNodes[this.childNodes.length]);

to be ...

this.insertBefore(  nCloneTd.cloneNode( true ));

Causes it to work correctly in IE and fail ("Not enough arguments to Node.InsertBefore") in Firefox. So the question is, is there a conditional I can put around these two statements in the javascript so that it does one thing for IE and another for Mozilla?

You could check the `navigator.appName` or something. But don't think that is the right way to do it. — putvande, Jan 06 '14 at 17:24
I'd just use jQuery and say goodbye to DOM compatibility issues. — elclanrs, Jan 06 '14 at 17:24
If you look at [Node.insertBefore](https://developer.mozilla.org/en-US/docs/Web/API/Node.insertBefore) you will see that it needs 2 parameters. So something is wrong in IE. See [this answer](http://stackoverflow.com/questions/9377887/ie-doesnt-support-insertbefore) — putvande, Jan 06 '14 at 17:26

score 0 · Answer 1 · answered Jan 06 '14 at 17:30

Your jquery loop and javascript insert could be refactored.

$("#account-table tbody tr").each(function () { 
    var $btn = $("<a>", 
    {
        href: this.id,
        html: "Detail",
        "class": "btn btn-mini btn-primary center",
        id: "detail_cell_" + this.id,
        style: "background-color: #fff"
    });

    $(this).append($btn);
});

You're giving n new <a> tags the same id, not a good idea.

You seem to be using bootstrap buttons so rather than having a <button> inside of an <a> tag you can give the <a> tag the btn classes

javascript button not showing in IE

1 Answers1