Question

仅当页面包含锚点的div ID时，我才需要在HTML书签链接的.content div之前插入HTML

<div id="#bookmark"><a name="bookmark"></a></div>

这是我写的jQuery，它不起作用，也不会产生任何错误。

if($("#bookmark").length > 0) {

 $(".content").insertBefore('<p><a href="#bookmark" class="bookmark-anchor">Jump To Section</a></p>');

 }

这是HTML

<div class="content">
<p>This is an example of content</p>
<h2>Sub Heading</h2>
<p>This is an example of content</p>
<h2>Sub Heading</h2>
<div id="#bookmark"><a name="bookmark"></a></div>
<p>This is an example of content</p>
</div>

另外，不确定是否最好使用.insertBefore，.prepend或任何其他jQuery方法。

Answer 1

insertBefore()方法正在使用当前代码在其他元素之前插入所选元素，它将在目标（HTML字符串）之前插入".content"元素。

要在".content"元素之前插入一些HTML内容，请使用before()方法。

$(".content").before('<p><a href="#bookmark" class="bookmark-anchor">Jump To Section</a></p>');

如果要在元素的开头附加内容，请使用prepend()方法。

$(".content").prepend('<p><a href="#bookmark" class="bookmark-anchor">Jump To Section</a></p>');

仅供参考：：从id属性值中删除#以避免出现问题，并且只有使用id选择器时才需要。

Answer 2

您的div ID为#。不需要#上的id。删除它并像下面一样使用prepend。

if ($("#bookmark").length > 0) {
  $(".content").prepend('<p><a href="#bookmark" class="bookmark-anchor">Jump To Section</a></p>');

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bookmark">
  <a name="bookmark"></a>
</div>
<div class='content'></div>

Answer 3

您可以根据需要使用setInterval。

let isLoad = setInterval(function () {
   if ($('#bookmark').length > 0) {
                $(".content").insertBefore('<p><a href="#bookmark" class="bookmark-anchor">Jump To Section</a></p>');
                   clearInterval(isLoad)
                }
   }, 500);

仅当页面包含div ID

3 个答案: