Как добавить элемент DOM с помощью jQuery?

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

Как насчет добавления его после последнего деления?

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

редактировать
Вы можете получить информацию через AJAX-вызов somefile.php, затем 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...
       }
   })