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

У меня есть функция, которую я сейчас использую, чтобы показать скрытый 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, если нажата кнопка. Теперь он не работает, когда дополнительные divs не загружаются в dom на pageload. Как я могу запустить функцию, чтобы удалить их сейчас?

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

});

});

Ответ 1

Как добавить его после последнего div.

$('.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, если вам все еще нужно.

Ответ 2

У меня есть другая функция, которая удаляет вставленный div, если нажата кнопка. Теперь он не работает, когда дополнительные divs не загружаются в dom на pageload. Как я могу запустить функцию, чтобы удалить их сейчас?

У вас есть три варианта решения самой последней проблемы.

Вы можете использовать liveQuery, плагин jQuery, который повторно применяет обработчики событий к элементам DOM при их добавлении. Примечание. Этот плагин будет эффективен только в том случае, если вы используете встроенные функции добавления/добавления jQuery DOM (добавление/добавление/после/перед/вставкаBefore/insertAfter и т.д.).
В качестве альтернативы вы можете просто повторно применить обработчики при добавлении новых элементов вручную... (не самый лучший вариант)
Третий, и, на мой взгляд, лучшим вариантом является использование огромной силы делегирования событий. То, что вы делаете, - это привязать обработчик событий к любому родителю, например, если вы собираетесь динамически добавлять элементы списка в неупорядоченный список, вместо того чтобы постоянно повторно применять обработчики событий к каждому добавленному элементу, вы можете просто присоединить обработчик событий для родителя, а затем найдите цель события:
```
$('ul').click(function(e){
    var target = e ? e.target : window.event.srcElement;
    if(target.nodeName.toLowerCase() === 'li') {
        // Do Stuff...
    }
})
```