Manejar el DOM con JQuery

AÑADIR HTML (Diferencias entre after y append):
<p>Click aquí</p>
<span>Añadir dentro del div</span>
<div id="divMain" style="border:1px solid #000;"></div>

<script>
$("body").on("click", "p", function() {
  $(this).after("<p>Otro trozo de HTML</p>");
});
$("body").on("click", "span", function() {
  $("#divMain").append("<p>Otro trozo para el div</p>");
});
</script>


Eventos para elementos generados dinámicamente: // delegate ya está deprecado
$(function() {
    $("p").on("click",function() {
      $(this).before("<div id='uno'>Código HTML para antes del p</div>");
      $(this).after("<div id='dos'>Código HTML para después del p</div>");
    });
 
    $(document).on( "click", "#uno", function() {
        console.log("Has pulsado uno del antes");
    });
    $(document).on( "click", "#dos", function() {
        console.log("Has pulsado uno del después");
    });
});
Vaciar una capa o borrarla:
$( ".miCapa" ).empty(); // borra el contenido de esa capa
$(".miCapa").remove(); // elimina la capa
Modificar el CSS o ejecutar el primer elemento de una serie:
$(".button").first().css("border","7px solid #000");
$(".button").first().click();