使用 jQuery 在元素后插入 HTML

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>');
})