如何使用jQuery添加DOM元素？

Question

我有一個功能，我目前正在使用它來顯示隱藏的div.a_type

如何修改此代碼，以便不是在隱藏div中淡入，我可以將新div添加到DOM

jQuery(function(){   // Add Answer

    jQuery(".add_answer").click(function(){
      if(count >= "4"){
        alert('Only 4 Answers Allowed');
        }else{
      var count = $(this).attr("alt");
      count++;
      $(this).parents('div:first').find('.a_type_'+count+'').fadeIn();
      $(this).attr("alt", count);
    }

    }); 

});

---

好的，既然我已經解決了這個問題，我還有一個問題，

我有另一個函數，如果單擊一個按鈕，將刪除插入的div。 現在它沒有工作，額外的div沒有加載到頁面加載的dom。 我如何觸發功能現在刪除這些？

jQuery（function（）{//隱藏答案

jQuery(".destroy_answer").click(function(){
  $(this).parents("div:first").fadeOut(function (){ $(this).remove() });
   var count = $(this).parents('div:first').parents('div:first').find('.add_answer').attr("alt");
   count--;
   $(this).parents('div:first').parents('div:first').find('.add_answer').attr("alt", count);

}); 

}）;

Answer 1

如何在最后一個div之后添加它。

$('.a_type:last').insertAfter('<div class="a_type">content</div>');

編輯
你可以通過對somefile.php的AJAX調用來獲取信息，然后somefile應該在div中返回你想要的內容：

$.get('path/to/somefile.php', function(data){
 $('.a_type:last').insertAfter('<div class="a_type">' + data + '</div>');
});

Somefile.php應該是這樣的：

<?php
 session_start();
 $sessiondata = $_SESSION['data'];
 echo "Whatever you type here will come inside the div bla bla $sessiondata";
?>

編輯
好的，試試這個：

jQuery(function(){ // Add Answer

jQuery(".add_answer").click(function(){
  if(count >= "4"){
    alert('Only 4 Answers Allowed');
    }else{
  var count = $(this).attr("alt");
  count++;
  $('.a_type_'+count-1+'').insertAfter(' 
       Place content back here');
  $(this).attr("alt", count);
}

});

});

如果你仍然需要，只需混合使用AJAX即可。

Answer 2

我有另一個函數，如果單擊一個按鈕，將刪除插入的div。 現在它沒有工作，額外的div沒有加載到頁面加載的dom。 我如何觸發功能現在刪除這些？

您有三種方法可以解決最近的問題。

1. 您可以使用liveQuery ，這是一個jQuery插件，可以在添加DOM元素時將事件處理程序重新應用。 注意：此插件僅在您使用本機jQuery DOM附加/前置函數（append / prepend / after / before / insertBefore / insertAfter等）時才有效。

2. 或者，您可以在添加新元素時手動重新應用處理程序...（不是最佳選項）

3. 第三，在我看來，最好的選擇是利用事件授權的強大力量。 您所做的是將事件處理程序附加到任何父級，例如，如果您要將列表項動態添加到無序列表，而不是不斷地將事件處理程序重新應用於每個添加的項，您只需附加事件處理程序到父母然后找到事件的目標：

    $('ul').click(function(e){ var target = e ? e.target : window.event.srcElement; if(target.nodeName.toLowerCase() === 'li') { // Do Stuff... } })