WP_Query (HTML output issues)

Hi all,

Firstly i’d like to say what a great resource this is. it’s been my ‘go to’ every time I need some help and guidance and, until now, I have always found a solution to my problem through other posts…but this is my first ever post!

I’m struggling to output HTML through the function below. I’m still pretty new to WP and
have spent the last few days trying to figure out how best to display a list of child pages in my sidebar. I’m almost there but the function isn’t displaying HTML as expected.

The function:

function show_the_kids() {
  global $post;
  $args = array(
      'post_type' => 'page',//it is a Page right?
      'post_status' => 'publish',
      'post_parent'    => $post->ID,
      'meta_query' => array(
          array(
              'key' => '_wp_page_template',
              'value' => 'tmpl_mytemplate.php', // template name as stored in the dB
          )
        )
    );
  $parent = new WP_Query( $args );
  if ( $parent->have_posts() ) :
      $str = "<h2>Show The Kids</h2>";
      $str.= "<ul>";
        while ( $parent->have_posts() ) : $parent->the_post();<br />
            $str .= "<li>" . the_title() . "</li>"/n;
        endwhile;
       $str."</ul>";
  endif;
  wp_reset_query();
  echo $str;
}

The final HTML:

result01result02result03result04result05result06result07result08result09result10<h2>Show The Kids</h2><li><li><li><li><li><li><li><li><li><li>

I’ve tried everything I can think of, a lot of which is pure guess work in terms of the while loop, but the penny hasn’t dropped yet. I’m obviously lacking some theory knowledge so would really appreciate any guidance you can offer.