Javascript 将新文本置于旧文本之上

我试过几种方法，但似乎遗漏了一些简单的东西。我想要的是，当用户输入他们的输入（即拿起剑）时，输出（“你现在有一把剑”）出现在最后一个输出的顶部

因此，如果前两个命令是：

向东走

南下

然后，您的输出将显示为：

你现在在南边的房间里

你现在在东边的房间

以下是我使用的代码：

$("form").submit(function() {
var input = $("#commandLine").val();
$("#placeholder").prepend($("<span class='line'>" + "</span>"));

$（“表单”）.submit（函数（）{
var输入=$（“#命令行”）.val（）；
$（“#占位符”）。前置（$（“”+）；

我在这条线上尝试了多种方法：

$（“#占位符”）。前置（$（“+”）；

要包括

输入

和

$（“#命令行”）.val（）

这两者都会产生两个问题：

它接受我键入的任何内容（向东），并在页面上显示输出（向东。你现在在东房间）

虽然我不想要的输入内容正确堆叠，但我想要的输出内容却不正确（即，每个新输出都低于而不是高于上一个输出）

我希望这是有道理的。以下是我的一把小提琴：

出于某种原因，我无法让fiddle正确运行，但代码在本地为我工作

我知道input和$（“#commandLine…”）是不正确的，但我不知道应该放在什么位置来提取后面函数的输出

下面是我所说内容的截图：

我需要“往东走”和“拿剑”离开，上面的线要按顺序切换

如果更换

$("#placeholder").prepend();

借

---

输出将正确叠加在先前显示的信息之上。

首先：您的小提琴中有语法错误。第5行：

$("#placeholder").prepend($("<span class='line'>" + input "</span>"));

对于您的淡入淡出效果：

return $("#actions").prepend(this).hide().fadeIn(1000);

更新小提琴：

更新：

$.fn.properDisplay = function() {
    this.addClass("line");
    return $("#actions").prepend(this).hide().fadeIn(1000);
};

---

更新的小提琴：

那把小提琴呢

我用以下内容更改了properDisplay方法

$.fn.properDisplay = function() {
    $("#col1").prepend(this);
    $(this).hide().fadeIn(1000);
    return true;
};

---

试过了，@DamienDUPRAZ.仍然执行相同的操作。目前，我在`$（“#col1”）。prepend（$（“+”））59在文本中对淡入淡出效果进行后期处理。因此有两个问题：1.我可以删除这一行吗？

$（“#col1”）。在第6行中添加（$（“”+）；

？2.我如何插入

“”+“”

要恢复淡出效果？在我的帖子底部为您的淡出效果添加了一点代码。同时更新了小提琴：对不起，我没有正确地传达。检查代码上的CSS。想法是当文本向下滚动页面时，从视图中慢慢淡出。这就是

“”+“”

完成。我不知道如何用新的修复程序重新插入。不，结果是一样的。它显示了你的命令（南下，拿剑），但没有结果（你现在有剑了…。你的答案非常接近@BryanRay。我不确定为什么他的作品和你的作品不一样。我看到他添加了一个新的div。也许这就是原因。

$.fn.properDisplay = function() {
    return $("#actions").prepend(this).fadeIn(1000);
    // return this.hide().insertBefore("#placeholder").fadeIn(1000);
};

return $("#actions").prepend(this).hide().fadeIn(1000);

$.fn.properDisplay = function() {
    this.addClass("line");
    return $("#actions").prepend(this).hide().fadeIn(1000);
};

$.fn.properDisplay = function() {
    $("#col1").prepend(this);
    $(this).hide().fadeIn(1000);
    return true;
};