Question

我正在尝试使用jQuery创建一个元素，它包含用户单击SUBMIT按钮后输入字段中的文本。

这是我的jsfiddle：http://jsfiddle.net/2y26rzot/

这是我的javascript：

    $(document).ready(function () {
        $('button[type=submit]').click(function () {
            var typedText = $('input[type=text]').val();
            var resultText = $('<p></p>').text(typedText+'2');
            $('section.result').append(resultText);
            console.log(typedText);
            alert(typedText);
            console.log(resultText);
            alert(resultText);
        });
    });

我已经包含了bootstrap js和css，当然还有jQuery。问题发生在第一个和第二个警报之间，但我不知道在哪里和为什么。我对jQuery有基本的了解，正如我通过做的那样学习它，所以我可能在这里遇到错误。

我本地计算机上的错误显示为：

文本

index.html：45 [p，jquery：“1.11.0”，构造函数：function，selector：   “”，toArray：function，get：function ...]

导航到file：/// C：/Users//Desktop/textonbackground/index.html？

当然，如果我使用resultText控制台日志删除最后两行并且警告我没有收到错误，但文本仍然消失，我不明白为什么。有人可以向我解释这一点，当然也可以通过其他方式来实现我的目标，即从输入字段中获取信息并将其作为页面上的段落发布。

我应该提一下，我尝试了不同的方法来构建变量并附加文本（使用.add和.after），但没有任何改变。我在这里遗漏了一些东西。

非常感谢您的帮助！

Answer 1

文本消失，因为页面在表单提交后刷新。问题不在.text()

中

如果您向其添加e.preventDefault()，则文字将保留在应有的位置。

如果您不想更改活动，可以使用常规按钮（<button type="button">）而不使用form

在线：http://jsfiddle.net/2y26rzot/3/

Answer 2

您的代码似乎在小提琴中工作正常，您只需要阻止表单提交的默认操作（如果它提交它将刷新页面，因此您的客户端更改，即使用js进行的更改，将不会显示）：

    $('button[type=submit]').click(function (e) {
        e.preventDefault();
        ...rest of code
    });

Updated Fiddle

Answer 3

如果你想附加一个p元素，里面有一个文本，你应该粗略地做

var resultText = $('<p>'+typedText+'2</p>');

因为.text（）如果你没有传递任何参数（获取文本），则返回相关元素的文本;如果传递参数（设置文本），则返回相关元素的jquery对象

用jQuery构建一个元素会给我一个错误

3 个答案: