Question

我试图在HTML注释之前插入带iframe的div（它是此位置唯一的唯一元素）。

所以我的评论如下：我希望在评论之前插入这样的代码：

<div id="test">
    <noscript>
      <iframe src="https://test.net" frameborder="0" scrolling="no" width="742" height="92"></iframe>
    </noscript>
</div>

我尝试过像.append（）和prepend（）这样的方法，但没有成功。

结果应为：

    <div id="test">
        <noscript>
          <iframe src="https://test.net" frameborder="0" scrolling="no" width="742" height="92"></iframe>
        </noscript>
    </div>
<!--  Comment -->

非常感谢您的帮助！

Answer 1

尝试使用.filter() nodeType为8的{{1}}返回元素

var div = "<div>abc</div>";

var comment = $("body").contents().filter(function() {
  return this.nodeType === 8
});

$(div).insertBefore(comment);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<!--  Comment --> 
  </body>

Answer 2

HTML comment has是DOM层次结构中的Node，它的nodeType属性为8.

$(document).ready(function () {
    var _html = '<div id="test">' 
    + '<noscript>' 
    + '<iframe src="https://test.net" frameborder="0" scrolling="no" width="742" height="92"></iframe>' 
    + '</noscript>' 
    + '</div>';

    $('body').contents().each(function (i, elem) {
        if (elem.nodeType == 8 && elem.data == "  Comment ") {
            $(_html).insertBefore(elem);
        }
    });

});

因此遍历所有注释找到你想要的那个并在该注释节点之前插入HTML。

工作fiddle

在HTML注释之前插入DIV元素

2 个答案: