jquery - 使用 jquery 动态地在 img 标签后追加 div

Question

当我点击发布按钮时，我想在 div 部分中的图像标签之后动态包含一个类名为“new-fish”的 div。包含的新 div 应该有新的 id。根据点击次数，应该添加很多 div。当我尝试使用以下代码时，它没有被附加。

  <section class="main-content" id="container">
  <div class="oyster"> </div>
  <div class="small-fish" id="fish1"> </div>
  <div class="medium-fish" id="fish2"> </div>
  <div class="large-fish" id="fish3"> </div>

  <img src="Assets/Arrow.png" class="right-arrow" alt="arrow" id="rightarrow" /> 

  </section>

 <footer> <input type="button" value="Post" class="post-button" /></footer>

/*Jquery */
$('.post-button').on('click',function(e){

    //$('#container img:last-child').append('<div class="small-fish"> </div>');
    $('#rightarrow').append('<div class="new-fish"> </div>');



}); 

Answer 1

你应该把你的代码放在里面

$(document).ready(function() { ... })

这样它会在 dom 加载后被调用，类 post-button 的按钮肯定会存在。

id rightarrow 引用了一个图像，你不能在图像中放置一个 div:你想要做的是将 div 附加到 ID 为 main-content 的部分>，它将被添加到图像之后的部分末尾。当然，当你添加另一个div时，它会被放在上一个添加之后。

至于id，你可以保留一个变量来统计点击次数。

$(document).ready(function() {

    var numberOfClicks = 0;

    $('.post-button').on('click',function(e){
        numberOfClicks++;
        $('#container').append('<div id="appendedDiv'+numberOfClicks+'" class="new-fish"> </div>');

    }); 

});