Вставить HTML после элемента с помощью jQuery

Question

Я ищу, чтобы добавить кнопку после определенного элемента на существующей странице. Это код, который я пробовал до сих пор.

$('.collection-nav').after('<span class="button">This is a button.</span>');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<nav class="index-navigation collection-nav" role="navigation">


  <div class="collection-nav-item" data-url-id="process">
    <a href="/process/" class="process">
      <span class="collection-nav-item-span">Process</span>
    </a>
  </div>


  <div class="collection-nav-item" data-url-id="our-breads">
    <a href="/our-breads/" class="our-breads">
      <span class="collection-nav-item-span">Bread</span>
    </a>
  </div>


  <div class="collection-nav-item" data-url-id="ourculutre">
    <a href="/ourculutre/" class="ourculutre">
      <span class="collection-nav-item-span">Culture</span>
    </a>
  </div>


  <div class="collection-nav-item" data-url-id="about">
    <a href="/about/" class="about">
      <span class="collection-nav-item-span">About</span>
    </a>
  </div>


</nav>

Что-то мне здесь не хватает?

Answer 1

Насколько я вижу, код, который вы написали, правильный, но его нужно запустить, чтобы он работал.

Вы можете добавить кнопку, как это => <button id="btnAfter">After Element</button>

Вы можете попробовать позже ваш код:

$('#btnAfter').click(function(){
  $('.collection-nav').after('<span class="button">This is a button.</span>');
})