Javascript to JQuery - Rendering the User Input in a Text Field

Question

I have a javascript function meant to append the contents of a text field to a list, in order to make it render as soon as the user clicks a button next to the text field. The button and text field show up fine, but I've been told that I need to convert my function to JQuery, whose syntax I'm far less familiar with than javascript. This is the function:

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

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

list is the list I want to append the text field contents to, and new-text is the id for the text field content.

This may be water under the bridge, but why is someone asking you to "convert JavaScript to jQuery"? Do they even realize that jQuery is still Just JavaScript (TM)? — Ken Franqueiro
– Ken Franqueiro, Commented Sep 28, 2015 at 3:12

Rowno · Accepted Answer · 2015-09-28 02:47:10Z

1

Try this:

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

answered Sep 28, 2015 at 2:47

Rowno

3,3942 gold badges25 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dave · Accepted Answer · 2015-09-28 02:50:43Z

0

Why fix what ain't broke? jQuery is mostly useful as a time saver so you don't have to write out the longer vanilla javascript syntax, but I can't imagine a situation in which it should be required. Nevertheless:

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

answered Sep 28, 2015 at 2:50

dave

2,9551 gold badge19 silver badges33 bronze badges

Comments

guradio · Accepted Answer · 2015-09-28 02:55:26Z

0

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

You can have it like this. I named the button with the id button on the event that button is clicked it will get the value of textbox with the id text and then append it to the ul with the id ul.

DEMO

Or if you want to have the event called from a function you can have it like this

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

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

edited Sep 28, 2015 at 2:55

answered Sep 28, 2015 at 2:49

guradio

15.6k4 gold badges39 silver badges64 bronze badges

Collectives™ on Stack Overflow

Javascript to JQuery - Rendering the User Input in a Text Field

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related