WordPress load more posts with AJAX

Currently i’m trying to load more posts whenever the user scrolls to a certain trough ajax. I’m calling the admin-ajax.php with an action located in my theme’s fumctions.php it looks like this:

function loadMore()
{
    $params = array(
        'posts_per_page' => 1,
        'post_type' => 'post'
    );

    // The Query
    $the_query = new WP_Query( $params );

    // The Loop
    if ( $the_query->have_posts() ) {
        while ( $the_query->have_posts() ) {
            $the_query->the_post();
            $the_permalink = the_permalink();

           $output = "<a class='article fade' href='$the_permalink'></a>";

            echo $output;

        }
    }

    wp_reset_postdata();

    die('');

}

So everything is working and i get a response from the ajax call, and i’m trying to append the data, only problem is for some reason the href is messed up the output looks like:

<a class="article fade" href=""></a>
/url/that/should/be/inside/the/href

Anyone knows what i’m doing wrong?

Thanks in advance!