Блог

Главная - Вопросы по программированию - Вставлять HTML перед div, только если страница содержит идентификатор div

Вставлять HTML перед div, только если страница содержит идентификатор div

#jquery #html

#jquery #HTML

Вопрос:

Мне нужно вставить HTML перед .content div для ссылки HTML book mark, но только если страница содержит идентификатор div для привязки, который

 <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.

Ответ №1:

insertBefore() Метод использует вставку выбранного элемента перед другим с вашим текущим кодом, он вставит ".content" элемент перед целью (строка HTML).

Чтобы вставить некоторый HTML-контент перед ".content" элементом, используйте 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, чтобы избежать проблем, и это необходимо только с помощью селектора идентификаторов.

Комментарии:

1. Спасибо, но это не работает. Возможно, эта часть неверна if ($("#bookmark").length > 0) {

2. @Michelle: заменить <div id="#bookmark"> на <div id="bookmark">

Ответ №2:

У вас есть # идентификатор div. Идентификатор не нужен # .Удалите это и используйте 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>

Ответ №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);
Метки: ,