javascript - jQuery Before(和其他 DOM 操作)未在 Internet Explorer 中执行

Question

我一直在 stackoverflow、jquery 和 google 中搜索答案，认为肯定会有一个明确的答案来解释为什么我无法在 Internet Explorer 中运行对 .before() 的 jquery 调用。它似乎可以在 Chrome、Firefox、Safari 和 Opera 中正常工作。

原始问题
我们在文档顶部有一个固定的面包屑和导航栏。该文档的其余部分包含许多段落，包含在适当的 <p></p> 中。标签。每个起始 P 标签之前都有一个 A anchor ，格式为 <a name='paragraphidentifier'>paragraphidentifier</a> 。通常，段落标识符的格式是引用的，例如 (1)(b)(a) 。

自从在本页顶部引入导航栏以来，指向这些 anchor 之一的任何外部超链接都会导致该 anchor 出现在工具栏下方。我发现看起来像 reasonable fix by pixelflips.com found here通过在 anchor 上方添加带有类的 span 标签。

我使用 jQuery 来完成添加它建议的跨度标签，使用下面的 jQuery 代码和相关 CSS:

    if(window.location.hash){
        var myHash = window.location.hash;
        var hashName =  myHash.substring(1, myHash.length);
        $("a[name=" + hashName +"]").before("<span class='anchorfix' id='" + hashName + "'></span>");
        // I have also tried .prepend and .replaceWith
    }


    .anchorfix{
    display: block;
    height: 12px; /*same height as header*/
    margin-top: -12px; /*same height as header*/
    visibility: hidden;
}

我还尝试了下面的 jQuery 代码，但也没有成功。

$("a").each(function(index, element) {
    var aName = $(this).attr('name');
    var aHtml = $(this).html();
    if(aName) $(this).replaceWith("<span class='anchorfix' id='" + aName + "'></span><a name='" + aHtml + "' />" + aHtml);

我有一个使用jsfiddle found here.上的lipsum文本的演示如果你在 Chrome 中测试，它是有效的。如果你在 IE 中测试，它永远不会添加 span 标签。

更新
我已经更新了上面的代码以反射(reflect) .before() 而不是 .prepend()。 “.before()”是我最初尝试过的但没有成功并开始尝试其他功能。

我无法发布图像或添加另一个链接来显示屏幕截图，我暂时将其作为纯文本 URL 放入，我希望它可以用来演示问题。 https://www.dropbox.com/s/8jqf0l93n4tv8kf/Screenshot%202015-04-23%2006.32.18.png?dl=0

任何人可以提供有关为什么在 Chrome 中正确执行但在 IE 中不能正确执行的指导或指示(我测试了 IE8 和 IE11，但没有成功)，我们将不胜感激。谢谢。 -埃里克

Answer 1

我相信这就是您想要做的:

$(document).ready(function (e) {
    $("a[name]").each(function() { // only selects tags with a name attribute
        var aName = $(this).attr('name');
        // .prepend() adds inside the element, .before() adds outside of it
        $(this).before("<span class='anchorfix' id='" + aName + "'></span>");
    });
});

http://jsfiddle.net/mp2z7hhu/