html elements disappear when the script runs

  // Where to show the records
  var output = document.getElementById('output');

/************************************************* 
   students records: an array of objects
*************************************************/

  var students = [
      {
           name: 'Farnoosh Mohri',
           track: 'Full Stack Javascript',
           achievements: 45,
           points: 3705
      }


      , {
          name: 'Brandon McFarland',
          track: 'Frontend Development',
          achievements: 36,
          points: 2083
    }

      , {
          name: 'Nicole Stardust',
           track: 'Graphic Design',
           achievements: 45,
           points: 3705
    }
        , {
          name: 'Shanon Goldwings',
           track: 'Web Design',
           achievements: 90,
           points: 6502
    }
           , {
          name: 'Ashton Warrior',
           track: 'Game Design',
           achievements: 45,
           points: 8470
    }


];


/************************************************* 
A place to show the search results
*************************************************/

  var recordBox = document.createElement('DIV');
  //create a class attribute
  var attr = document.createAttribute('class');
  //  give the class attribute a name value
  attr.value = 'recBox';
  //give that class attribute to the created div elm
  recordBox.setAttributeNode(attr);
  // add the created div to the output div on the page
  output.appendChild(recordBox);

 /************************************************* 
  Prompt the user for the search key
*************************************************/

var searchKey = prompt('Search a students by first and last name, seperated by space.');
// keep search key as normal case and use sKey in the loop

var searchKeyFound = false;

/*************************************************   
  Search the students records
*************************************************/

/* if the user DID enter something in the prompt. (because if the user don't put anything
 in the prompt and clicked 'cancel' the value will be null and if they click 'ok' the value
 will be an empty string */
if(searchKey!==null && searchKey!==''){
  for (var i=0; i<students.length; i++){
    // If the name exists (search everything in lowercase version)
     if(searchKey.toLowerCase() === students[i].name.toLowerCase() ){

      // show the records for that search;
      recordBox.innerHTML= '<p>'+'<span> Name: </span>'+students[i].name + 
' | '+'<span> Track: </span>'+ students[i].track +' | '+'<span> Achievements: </span>'+
 students[i].achievements+' | '+'<span> Points: </span>' + students[i].points+'</p>';

      // search key exists
      searchKeyFound = true;
      // exit the loop as soon as the name is found 
      // everything that comes after the break in the loop won't run!
      break;
    }

  } //end of for loop


// the name wasn't found in the array
  if(!searchKeyFound){

       recordBox.innerHTML= '<p> Sorry! '+ searchKey  + ' is not registered with us. </p>'; 
  }

}// end of first if
  /* the user didn't enter anything in the prompt and clicked 1.cancel or 2.ok 
  if(searchKey===null || searchKey==='')
  */
else {
   recordBox.innerHTML= '<p> You didn\'t search a student. </p>'; 

 }