Добавление содержимого команды UNIX в тег div

Я делаю веб-терминал UNIX для обучения. Пока что я сделал текстовое поле и выводится вывод. Вот так.

<?php $output = shell_exec('ls'); echo "<pre>$output</pre>"; ?> 

форма

 <html> <head> <link href="/css/webterminal.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> function shell_execute(str) { if (str.length==0) { document.getElementById("txtOut").innerHTML=""; return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txtOut").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","exec.php?q="+str,true); xmlhttp.send(); } </script> </head <body onLoad="setUser();"> <div class="container"> <h2>UNIX Web Based Terminal 1.0</h2> <br /> <p><b>output</b></p> <form> <span id="User"></span>< <input type="text" class="textbox" onkeyup="shell_execute(this.value)" size="20" /> </form> <div class="output"> <p><span id="txtOut"></span></p> </div> </div> </body> </html> 

Но я хочу, чтобы это выглядело так, как будто страница была действительно терминалом. Когда я набираю команду, она должна хранить результат команды оболочки, а затем добавлять ее к тегу div. Так как я набираю команды, он будет продолжать показывать результат. Как и в терминале UNIX.

Как добавить вывод команд в тег div?