¿Cómo agrego un elemento DOM con jQuery?

Question

Tengo un Funciton que actualmente estoy usando para mostrar un div.a_type oculto

¿Cómo puedo modificar el código para que en vez de desaparecer en el div oculto, puedo añadir el nuevo div al 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); 
    } 

    }); 

}); 

---

Ok, ahora que tengo este resuelto, tengo una pregunta más,

tengo otra función que elimina los insertadas divs si se hace clic en un botón. No está funcionando ahora que los divs adicionales no se cargan en la carga de la página principal. ¿Cómo puedo activar la función para eliminar estos ahora?

jQuery (function() {// Ocultar respuesta

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

¿Qué le parece agregarlo después de la última div.

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

edición
Puede obtener la información a través de una llamada AJAX para somefile.php, somefile debe entonces devolver el contenido que desea en el div:

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

somefile.php debe ser algo como esto:

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

edición
Bien, intente esto:

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

}); 

}); 

La mezcla justa en el AJAX si todavía lo necesita.

Answer 2

Tengo otra función que elimina los div insertados si se hace clic en un botón. No está funcionando ahora que los divs adicionales no se cargan en la carga de la página principal. ¿Cómo puedo activar la función para eliminar estos ahora?

Tiene tres opciones para resolver su problema más reciente.

1. Usted podría utilizar liveQuery, un plugin de jQuery, que vuelve a aplicar controladores de eventos a los elementos DOM cuando se añaden. Nota: este complemento solo será efectivo si está usando las funciones nativas jQuery DOM para añadir/anteponer (append/prepend/after/before/insertBefore/insertAfter etc.).

2. Alternativamente, usted puede simplemente volver a aplicar los controladores cuando se añaden nuevos elementos, de forma manual ... (no es la mejor opción)

3. La tercera, y en mi opinión, la mejor opción es utilizar el impresionante delegación de poder de evento.Lo que hace es adjuntar un controlador de eventos a cualquier padre, por ejemplo, si va a agregar dinámicamente elementos de lista a una lista desordenada, en lugar de volver a aplicar continuamente controladores de eventos a cada elemento agregado, simplemente puede adjuntar el controlador de eventos al padre y luego encontrar el destino del evento:

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