javascript - 每次用户提交文本时创建/显示一个新的 Div

Question

我想在提交时在新的 div 中显示文本字段的内容，每次单击文本字段下的提交按钮时，我都希望创建一个新的 div。

例如，人员 A 输入“你好”并点击提交，“你好”现在显示在页面的其他位置。

人 B 出现并输入“hello again”并点击提交，“hello again”也显示在第一个“hello”之后的下一个 div 中，等等。

这个功能甚至可能吗？任何帮助，将不胜感激。

Answer 1

我相信我已经创建了一个使用 jquery 的示例：http: //jsfiddle.net/sVgxa/

HTML：

<textarea id="input"></textarea>
<button id="submit">Enter</button>
<div id="newDivs"></div>

Javascript：

$('#submit').click(function() {
   var text = $('#input').val();
   $('#newDivs').append('<div>' + text + '</div>');
});

正如 trims 所说，如果您想要在不同用户之间显示的东西，您将需要使用 Ajax 的更复杂的东西。

Answer 2

如果你可以使用 jQuery，那么 -

HTML -

<input id="text-box" value="" />
<button id="submit">Submit</button>
<div id="message-wrapper"></div>

JavaScript -

$(document).ready(
        function() {
            $("#submit").click(
                    function() {
                        $("<div>" + $("#text-box").val() + "</div>").appendTo(
                                "#message-wrapper");
                    })
        });

Answer 3

您所描述的看起来像简单的 Ajax Web Chat 应用程序。仅使用 javascript 不足以获得您想要的。您可以查看以下示例： http: //net.tutsplus.com/tutorials/javascript-ajax/how-to-create-a-simple-web-based-chat-application/ 或谷歌了解如何创建 Ajax 聊天应用程序。有很多很好的例子来说明如何使用不同的编程语言创建这样的应用程序。