Javascript to JQuery - 在文本字段中呈现用户输入答案

【问题标题】：Javascript to JQuery - Rendering the User Input in a Text FieldJavascript to JQuery - 在文本字段中呈现用户输入
【发布时间】：2015-09-28 02:40:03
【问题描述】：

我有一个 javascript 函数，旨在将文本字段的内容附加到列表中，以便在用户单击文本字段旁边的按钮时立即呈现。按钮和文本字段显示良好，但有人告诉我需要将我的函数转换为 JQuery，我对它的语法远不如 javascript 熟悉。这是函数：

document.getElementById("append").onclick = function()
{
    var text = document.getElementById("new-text").value;

    var li = "<li>" + text + "</li>";
    document.getElementById("list").appendChild(li);
}

list 是我想要将文本字段内容附加到的列表，new-text 是文本字段内容的 ID。

【问题讨论】：

这可能是桥下的水，但是为什么有人要求您“将JavaScript转换为jQuery”？他们是否意识到 jQuery 仍然只是 JavaScript (TM)？

标签： javascript jquery html rendering appendchild

【解决方案1】：

试试这个：

$('#append').on('click', function () {
    var text = $('#new-text').val();
    var li = '<li>' + text + '</li>';
    $('#list').append(li);
});

【讨论】：

【解决方案2】：

为什么要修复没有损坏的东西？ jQuery 在节省时间方面非常有用，因此您不必编写更长的 vanilla javascript 语法，但我无法想象应该需要它的情况。尽管如此：

$("#append").click(function()
{
    var text = $("#new-text").val();
    var li = $("<li>"+text+"</li>");
    $("#list").append(li);
});

【讨论】：

【解决方案3】：

$('#button').click(function () {
    var text = $('#text').val();
    var li;
    li = $('<li>' + text + '</li>');
    $("#ul").append(li);
})

你可以这样。我将按钮命名为 ID 为 button，如果单击该按钮，它将获取 ID 为 text 的文本框的值，然后将其附加到 ID 为 ul 的 ul。

DEMO

或者，如果您想从函数中调用事件，您可以像 this 那样使用它

$('#button').click(function () {
   buttonclick();
})

function buttonclick(){
    var text = $('#text').val();
    var li;
    li = $('<li>' + text + '</li>');
    $("#ul").append(li);
}

【讨论】：