How to put text written in a text box

This is a tricky question, but here. I created a jquery chat function where I enter something in the textbox tag and hit send and it goes to the chat window. It's done.

I just found a voice in a text library using javascript. http://ctrlq.org/code/19680-html5-web-speech-api

My problem is that I don't know how to put all the required html tags inside the textfield tag ... I don't think this is possible ... or maybe I am wrong.

This is how the code works (no vote) https://jsfiddle.net/v3Lru135/

Here is the code with a voice and my attempt at adding html tags https://jsfiddle.net/9r93vcsq/

Can someone help me get this, when I click this button and start talking, it puts what I say in text form in the text box so I can click submit .... Thanks

<div id="chatContainer">

     </div>

     <div id="chatControls">

     <!--<textarea id="chatTextBox" placeholder = "Enter your message   
here..."> </textarea>-->

<div id="chatTextBox">
     <div>
      <a href="#" id="start_button"  
onclick="startDictation(event)">Dictate</a>
    </div>

    <div id="results">
      <span id="final_span" class="final"></span>
      <span id="interim_span" class="interim"></span>
    </div>
  </div>


     <button id="chatSend">Send</button>

#chatContainer{
    width: 95%;
    height: 50px;
    background: url(../assets/chatTile.png) repeat;
    border: 1px solid #333;
    margin: 0 auto;
    border-radius: 5px;
    margin-top: 10px;
    overflow-y: scroll !important;
    padding: 5px;
}
#chatTextBox{
    resize: none;
    width: 65%;
    height: 35px !important;
    float: left;
    opacity: .9;
}
#chatControls{
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    display: inline-block;
}
#chatSend{
    resize: none !important;
    width: 50%;
    height: 35px !important;
    display: inline-block;
    max-width: 30%;
    float: right;
    opacity: .9;
    padding: 5px;
}


.chatUsername{
    color: red;
    font-weight: bold;
}
.botMan{
    color: #424242;
    font-weight: bold;
}



var canned = ["Ok, how is this?" , "You're welcome!"]

$(function() {

  // grab a reference to the chat
  var chat = $("#chatContainer")

  // add a click handler to send messages
  $("#chatSend").click(function() {

    var username = "<span class=chatUsername>CNN_News: </span>"
      , newMessage = $("#chatTextBox").val() + '<br>'
      , delay = 4000

    // reset the input
    $("#chatTextBox").val("")

    // render the chat
    chat.append(username + newMessage)
    chat.scrollTop(chat.prop("scrollHeight"))

    // set a timeout to send a canned response

    setTimeout(function() {
      chat.append('<span class=botMan>StarkFan: </span>' + 
canned.shift() + '<br>')
      chat.scrollTop(chat.prop("scrollHeight"))
    }, delay)

  // end of click handler
  })
})















var final_transcript = '';
var recognizing = false;

if ('webkitSpeechRecognition' in window) {

  var recognition = new webkitSpeechRecognition();

  recognition.continuous = true;
  recognition.interimResults = true;

  recognition.onstart = function() {
    recognizing = true;
  };

  recognition.onerror = function(event) {
    console.log(event.error);
  };

  recognition.onend = function() {
    recognizing = false;
  };

  recognition.onresult = function(event) {
    var interim_transcript = '';
    for (var i = event.resultIndex; i < event.results.length; ++i) {
      if (event.results[i].isFinal) {
        final_transcript += event.results[i][0].transcript;
      } else {
        interim_transcript += event.results[i][0].transcript;
      }
    }
    final_transcript = capitalize(final_transcript);
    final_span.innerHTML = linebreak(final_transcript);
    interim_span.innerHTML = linebreak(interim_transcript);

  };
}

var two_line = /\n\n/g;
var one_line = /\n/g;
function linebreak(s) {
  return s.replace(two_line, '<p></p>').replace(one_line, '<br>');
}

function capitalize(s) {
  return s.replace(s.substr(0,1), function(m) { return m.toUpperCase(); });
}

function startDictation(event) {
  if (recognizing) {
    recognition.stop();
    return;
  }
  final_transcript = '';
  recognition.lang = 'en-US';
  recognition.start();
  final_span.innerHTML = '';
  interim_span.innerHTML = '';
}