将UNIX命令的内容附加到div标记

我正在制作一个UNIX基于Web的terminal用于学习目的。 到目前为止,我已经做了一个文本框,输出正在显示。 有点像这样

<?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> 

但是我希望它看起来好像这个页面真的是一个terminal。 当我键入命令时,它应该存储shell命令的结果,然后将其附加到div标记。 所以当我input命令时,它将继续显示输出。 就像在UNIXterminal中一样。

如何将命令的输出追加到div标签?

更改:

 document.getElementById("txtOut").innerHTML=xmlhttp.responseText; 

至:

 document.getElementById("txtOut").innerHTML += xmlhttp.responseText; 

在旁注中,为什么你不使用任何已经建立的JavaScript框架?

以jQuery为例,您可以将代码减少到4行。

编辑 – 使用jQuery: http : //api.jquery.com/jQuery.ajax/

 <html> <head> <link href="/css/webterminal.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <script type="text/javascript"> $(function () { $('#cmd').bind('keydown', function (evt) { if (evt.keyCode === 13) { // enter key var cmdStr = $(this).val(); $.ajax({ url: 'exec.php', dataType: 'text', data: { q: cmdStr }, success: function (response) { $('#txtOut').append(response); } }); } }); }); </script> </head> <body> <div class="container"> <h2>UNIX Web Based Terminal 1.0</h2> <br /> <p><b>output</b></p> <span id="User"></span> <input id="cmd" type="text" class="textbox" size="20" /> <div class="output"> <p><span id="txtOut"></span></p> </div> </div> </body> </html>