Javascript 我可以附加书写内容的框

我必须做一个伪聊天，在按下按钮后，它会在文本区域上方的框中添加文本。到目前为止，我的代码是这样的

<form name="frm1" id="puts">
  <textarea name="txt1" COLS=15 ROWS=1></textarea>
  <a class="Sisesta Nupp" id="nupp5" href="#"
     onclick="alert(document.frm1.txt1.value) +(document.frm1.txt1.value='')"">
    <span>Sisesta </span>
  </a>

但是如何让它写在文本区域上方的一个框中，这样它就不会从上面的框中删除以前写过的内容了？如果文本不再合适，如何绘制一个框，它将形成一个卷轴？当我写东西的时候，它应该从一个列表中用一个随机的句子来回答我

---

edit1：因为html是垃圾，另外两个解决方案（很好）在我的代码中不起作用，我想知道，我如何才能将document.frm1.txt1.value附加到我的文本区域上方的框中？

使用jQuery很容易创建：

jQuery代码：

$('#button').click(function() {
   $('#result').append('<br />'+$('#text').val());
   $('#text').val('').focus(); 
});

$（“#按钮”）。单击（函数（）{
$（'#result'）.append（'
'+$（'#text'）.val（））；
$（'#text'）.val（''.focus（）；
});

HTML:

---

--编辑：-

使用jQuery很容易创建：

jQuery代码：

$('#button').click(function() {
   $('#result').append('<br />'+$('#text').val());
   $('#text').val('').focus(); 
});

$（“#按钮”）。单击（函数（）{
$（'#result'）.append（'
'+$（'#text'）.val（））；
$（'#text'）.val（''.focus（）；
});

HTML:

---

--编辑：-

嗯，我有几分钟的时间要打发（等待IM响应），所以我想到了这个可能性，使用稍微修改的html：

<div id="box">
    <ol id="chat"></ol>
</div>
<form action="#" method="post">
    <textarea id='text'></textarea>
    <input type='submit' value='send' id='button'>
</form>
<div id='result'></div>

和jQuery：

$('#button').click(
    function(){
        var text = $('#text').val();
        $('<li />')
            .text(text)
            .appendTo('#chat');
          $('#text').val('');
        return false;
    });

$('#text').keypress(
    function(e){
        if (e.keyCode == 13 && e.shiftKey == true){
           // might be a better way to do 'nothing'...
        }
        else if (e.keyCode == 13) {
            $('#button').click();
            return false;
        }
    });

$（“#按钮”）。单击(
函数（）{
var text=$（'#text'）.val（）；
$（“
”）
.文本（文本）
.appendTo（“#chat”）；
$（'#text'）.val（''）；
返回false；
});
$（'#text'）。按键(
职能（e）{
if（e.keyCode==13&&e.shiftKey==true）{
//可能是一个更好的“什么都不做”的方式。。。
}
否则如果（e.keyCode==13）{
$（“#按钮”）。单击（）；
返回false；
}
});

---

---

编辑链接到修改后的演示（用于“经典IM”外观）：。

好吧，我有几分钟要消磨（等待IM响应），所以我想到了这个可能性，使用稍微修改的html：

<div id="box">
    <ol id="chat"></ol>
</div>
<form action="#" method="post">
    <textarea id='text'></textarea>
    <input type='submit' value='send' id='button'>
</form>
<div id='result'></div>

和jQuery：

$('#button').click(
    function(){
        var text = $('#text').val();
        $('<li />')
            .text(text)
            .appendTo('#chat');
          $('#text').val('');
        return false;
    });

$('#text').keypress(
    function(e){
        if (e.keyCode == 13 && e.shiftKey == true){
           // might be a better way to do 'nothing'...
        }
        else if (e.keyCode == 13) {
            $('#button').click();
            return false;
        }
    });

$（“#按钮”）。单击(
函数（）{
var text=$（'#text'）.val（）；
$（“
”）
.文本（文本）
.appendTo（“#chat”）；
$（'#text'）.val（''）；
返回false；
});
$（'#text'）。按键(
职能（e）{
if（e.keyCode==13&&e.shiftKey==true）{
//可能是一个更好的“什么都不做”的方式。。。
}
否则如果（e.keyCode==13）{
$（“#按钮”）。单击（）；
返回false；
}
});

---

---

编辑以链接到修订版演示（用于“经典IM”外观）：。

但它附加在哪里？我需要将它附加到文本区域上方的框中好的，它在JSFIDLE中工作，但在eclipse中不工作。我按下按钮后，它不会在任何地方写入，也不会清除文本区域：/@nils:是否包含jQuery？是的，但它附加在哪里？我需要将它附加到文本区域上方的框中好的，它在JSFIDLE中工作，但在eclipse中不工作。在我按下按钮后，它不会在任何地方写入内容，也不会清除文本区域：/@nils:是否包含jQuery？是的，您的版本看起来很有趣，但如果我运行它，它会从一开始就重新启动整个页面：，而且就我所见，它仍然不会在任何地方写入任何内容上面的框（文本的附加位置）被我的背景图像覆盖。很好的一个，甚至看起来像一个聊天窗口+1@rsplak，非常感谢！：）@nils，你有没有机会发布一个你自己的帖子，展示你的作品？到目前为止，我和rsplak都发布了一些满足您所述要求但不满足您需求的内容。我想，为了正确地回答你的问题，我们需要看看你在用什么。呵呵，好吧，代码看起来很糟糕，但是因为这是我第一次编写html等等。我只是想让事情正常工作gentle@nils，谢谢，但要加载

mängija.js

JavaScript，js FIDLE需要一个绝对路径。而且，据我所知，这似乎是可行的，你有什么问题吗？你的版本看起来很有趣，但如果我运行它，它会从一开始就重新启动整个页面：/而且它在我能看到的任何地方都不会写任何东西上面的框（文本的附加位置）被我的背景图像覆盖。很好的一个，甚至看起来像一个聊天窗口+1@rsplak，非常感谢！：）@nils，你有没有机会发布一个你自己的帖子，展示你的作品？到目前为止，我和rsplak都发布了一些满足您所述要求但不满足您需求的内容。我想，为了正确地回答你的问题，我们需要看看你在用什么。呵呵，好吧，代码看起来很糟糕，但是因为这是我第一次编写html等等。我只是想让事情正常工作gentle@nils，谢谢，但要加载

mängija.js

JavaScript，js FIDLE需要一个绝对路径。而且，据我所知，这似乎是可行的，你有什么问题吗？