IE中未显示javascript按钮[重复]答案

【问题标题】：javascript button not showing in IE [duplicate]IE中未显示javascript按钮[重复]
【发布时间】：2014-01-06 17:21:27
【问题描述】：

以下代码在表格行的一端创建一个蓝色按钮，该按钮链接到您所在的客户的详细信息页面（您所在的行）。此代码在 Firefox 中有效，但在 Internet Explorer 中不显示任何按钮，因此您无法访问详细信息页面。有人可以提出一个适用于 IE 和 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] );
      });

其中一个答案询问开发工具控制台对页面/错误的看法。在 IE 中查看开发工具控制台后，发现问题出在这一行...

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

改变...

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

成为……

this.insertBefore( nCloneTh);

和...

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

成为……

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

导致它在 IE 中正常工作并在 Firefox 中失败（“Node.InsertBefore 的参数不足”）。所以问题是，我是否可以在 javascript 中围绕这两个语句添加一个条件，以便它为 IE 做一件事而为 Mozilla 做另一件事？

【问题讨论】：

您可以查看navigator.appName 或其他内容。但不要认为这是正确的做法。
我只想使用 jQuery 并告别 DOM 兼容性问题。
如果您查看Node.insertBefore，您会发现它需要 2 个参数。所以 IE 出了点问题。见this answer

标签： javascript internet-explorer button mozilla

【解决方案1】：

您的 jquery 循环和 javascript 插入可以重构。

$("#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);
});

你给n新的<a>标签同样id，不是一个好主意。

您似乎正在使用引导按钮，因此您可以为 <a> 标记提供 btn 类，而不是在 <a> 标记内使用 <button>

【讨论】：