title: Append a string at a specific point in the div
body: <p>I am making a little hang man game in HTML and I am trying to push a letter which the user has guessed correctly to where ever it needs to go in the <code>div</code>. Here is what I have so far:</p>
  
  <pre><code>var words = ['dog', 'mouse', 'horse', 'fossil', 'christmas', 'mountain', 'javascript', 'glitter', 'pringles', 'connect'];
  var output = "";
  var gRand = "";
  var gWordAry = "";
  function startGame() {
      var rand = words[Math.floor(Math.random() * words.length)]; //gets a random word from the array, stores as rand
      var wordAry = rand.split(''); //splits random word into its own array and each letter is in the array
      gRand = rand; //stores random word as global var
      gWordAry = wordAry;
      alert(wordAry);
      $('#hangmanGame').show();
      $('#startBtn').hide();
      //alert(rand);
      for (i = 0; i &lt; wordAry.length; i++) { //draws a dash for every letter in the random word array after split
          //draw canvas dash
          output += ' _ ';
          $('#wordGuess').html(output);
      }
  
  
      //alert(output);
  
  
  }
  
  function guess(letter) {
      var letterID = letter.toLowerCase(); //converts letter to lowercase from html
      //alert(letterID);
      var foundLetter = 0;
      for (i=0;i&lt;gWordAry.length; i++){
          if (gWordAry[i] == letterID){ //if a letter in the word array = the letter clicked this will run
              //alert('correct');
              foundLetter++;
              displayLetter(letterID);
          }
      }
      if (foundLetter == 0){ //if no letters in the array are found this will run
          alert('Try Again');
      }
  
  }
  
  function displayLetter(letterID){
      //displays all letters in the word
      $('#wordGuess').append(letterID)
  }
  </code></pre>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div id="hangmanGame"&gt;
      &lt;div id="wordGuess"&gt;  &lt;/div&gt;  //THIS IS THE DIV WHERE THE LETTERS ARE GOING
      &lt;table style="margin: auto;position: relative;top: 500px;"&gt;
          &lt;tr&gt; 
              &lt;td&gt;&lt;button class="alphabet" type="button"&gt; &lt;/button&gt;&lt;/td&gt;
              &lt;td&gt; &lt;button type="button" onclick="guess('A')" id="1" class="alphabet"&gt;A &lt;/button&gt;&lt;/td&gt; 
              &lt;td&gt; &lt;button type="button" onclick="guess('B')" id="2" class="alphabet"&gt;B &lt;/button&gt;&lt;/td&gt;
              &lt;td&gt; &lt;button type="button" onclick="guess('C')" id="3" class="alphabet"&gt;C &lt;/button&gt;&lt;/td&gt;
              &lt;td&gt; &lt;button type="button" onclick="guess('D')" id="4" class="alphabet"&gt;D &lt;/button&gt;&lt;/td&gt;
              &lt;td&gt; &lt;button type="button" onclick="guess('E')" id="5" class="alphabet"&gt;E &lt;/button&gt;&lt;/td&gt;
              &lt;td&gt; &lt;button type="button" onclick="guess('F')" id="6" class="alphabet"&gt;F &lt;/button&gt;&lt;/td&gt;
              &lt;td&gt; &lt;button type="button" onclick="guess('G')" id="7" class="alphabet"&gt;G &lt;/button&gt;&lt;/td&gt;
              &lt;td&gt; &lt;button type="button" onclick="guess('H')" id="8" class="alphabet"&gt;H &lt;/button&gt;&lt;/td&gt;
              &lt;td&gt; &lt;button class="alphabet" type="button"&gt; &lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt; 
              &lt;td&gt; &lt;button class="alphabet" type="button"&gt; &lt;/button&gt;&lt;/td&gt;
              &lt;td&gt; &lt;button type="button" onclick="guess('I')" id="9" class="alphabet"&gt;I &lt;/button&gt;&lt;/td&gt;
              &lt;td&gt; &lt;button type="button" onclick="guess('J')" id="10" class="alphabet"&gt;J &lt;/button&gt;&lt;/td&gt;
              &lt;td&gt; &lt;button type="button" onclick="guess('K')" id="11" class="alphabet"&gt;K &lt;/button&gt;&lt;/td&gt;
              &lt;td&gt; &lt;button type="button" onclick="guess('L')" id="12" class="alphabet"&gt;L &lt;/button&gt;&lt;/td&gt;
              &lt;td&gt; &lt;button type="button" onclick="guess('M')" id="13" class="alphabet"&gt;M &lt;/button&gt;&lt;/td&gt;
              &lt;td&gt; &lt;button type="button" onclick="guess('N')" id="14" class="alphabet"&gt;N &lt;/button&gt;&lt;/td&gt;
              &lt;td&gt; &lt;button type="button" onclick="guess('O')" id="15" class="alphabet"&gt;O &lt;/button&gt;&lt;/td&gt;
              &lt;td&gt; &lt;button type="button" onclick="guess('P')" id="16" class="alphabet"&gt;P &lt;/button&gt;&lt;/td&gt;
              &lt;td&gt;&lt;button class="alphabet" type="button"&gt; &lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt; &lt;td&gt; &lt;button type="button" onclick="guess('Q')" id="17" class="alphabet"&gt;Q &lt;/button&gt;&lt;/td&gt;
              &lt;td&gt; &lt;button type="button" onclick="guess('R')" id="18" class="alphabet"&gt;R &lt;/button&gt;&lt;/td&gt;
              &lt;td&gt; &lt;button type="button" onclick="guess('S')" id="19" class="alphabet"&gt;S &lt;/button&gt;&lt;/td&gt;
              &lt;td&gt; &lt;button type="button" onclick="guess('T')" id="20" class="alphabet"&gt;T &lt;/button&gt;&lt;/td&gt;
              &lt;td&gt; &lt;button type="button" onclick="guess('U')" id="21" class="alphabet"&gt;U &lt;/button&gt;&lt;/td&gt;
              &lt;td&gt; &lt;button type="button" onclick="guess('V')" id="22" class="alphabet"&gt;V &lt;/button&gt;&lt;/td&gt;
              &lt;td&gt; &lt;button type="button" onclick="guess('W')" id="23" class="alphabet"&gt;W &lt;/button&gt;&lt;/td&gt;
              &lt;td&gt; &lt;button type="button" onclick="guess('X')" id="24" class="alphabet"&gt;X &lt;/button&gt;&lt;/td&gt;
              &lt;td&gt; &lt;button type="button" onclick="guess('Y')" id="25" class="alphabet"&gt;Y &lt;/button&gt;&lt;/td&gt;
              &lt;td&gt; &lt;button type="button" onclick="guess('Z')" id="26" class="alphabet"&gt;Z &lt;/button&gt;&lt;/td&gt; &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The code may be a bit messy. I'm new to coding. Can anyone help? What I have at the moment adds the letter to the end of the <code>_</code>.</p>