Question

当我点击post按钮时，我希望在section div中的图像标记之后动态地包含一个classname为“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时，它将在添加前一个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>');

    }); 

});

Answer 2

您无法在图片中追加元素，您可能正在寻找的是插入new-fish作为图片的下一个兄弟，然后使用.after()

$('#rightarrow').after('<div class="new-fish"> </div>');

演示：Fiddle，Demo2

Answer 3

像这样使用......

$(document).ready(function(){
var i=0;
$('.post-button').on('click',function(e){
$('#container').append("<div class='new-fish' id='new-fish"+i+"'>coming </div>");
i++;
}); 

});

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

3 个答案: