Ajax: Publicar contenido dinámico ajax

Estoy tratando de escribir el contenido de un div en un nuevo archivo html. El contenido de div está siendo generado por ajax, por lo que cuando intento publicar el contenido en un nuevo archivo, todo lo que se escribe en el archivo es el html sin formato. ¿Hay alguna forma de escribir el contenido div del contenido 'ajaxed in'?

Este es mi código ajax:

$("#getSource").on('click', function(){

  headerURL = $(".header-code").attr('data-url');
  $.ajax({
    url: headerURL,
    data: "function=showCode",
    success: function(data){
      $('code #mainCode').append(data);
    }
  });

  var bufferId =$("#mainCode").html();
  $.ajax({
     type : "POST",
     url : "postCode.php",
     data: {id : bufferId},
     dataType: "html",
     success: function(data){ 
       alert("ok");  
     }
  });
});

Mi código php:

$handle = fopen("test.html", 'w+');
$data = $_POST['id'];
if($handle) {
    if(!fwrite($handle, $data )) {
        echo "ok";
    }
}

El resultado final de lo que se escribe en test.html:

<div id="mainCode"></div>

Cuando realmente necesito:

<div id="mainCode">
  [dynamic content that is added by the user via ajax]
</div>