javascript - Append input value to a div - Stack Overflow

admin管理员组

文章数量:1313121

can someone show me how to take an input value and append it to a div once the user clicks on an Add link?

This is the best I could do. HTML:

<div id="customUtility-container"></div>
<a href="#" id="addUtility">Add</a>

jQuery:

$(function() {
                var addDiv = $('#customUtility-container');
                var i = $('#customUtility-container').size() + 1;

                $('#addUtility').live('click', function() {
                        $('#customUtility').val().appendTo(addDiv);
                        $('<p><label for="customUtility-container"><input type="text" id="customUtility" size="20" name="customUtility_' + i +'" value="" placeholder="" /></label> <a href="#" id="removeUtility">Remove</a></p>').appendTo(addDiv);
                        i++;
                        return false;
                });

                $('#removeUtility').live('click', function() {
                        if( i > 2 ) {
                                $(this).parents('p').remove();
                                i--;
                        }
                        return false;
                });

This creates another input field however; I just want to have one input box, have the user click Add, then it takes that value, puts it into the list, and clears the input box so the user can add something else again.

can someone show me how to take an input value and append it to a div once the user clicks on an Add link?

This is the best I could do. HTML:

<div id="customUtility-container"></div>
<a href="#" id="addUtility">Add</a>

jQuery:

$(function() {
                var addDiv = $('#customUtility-container');
                var i = $('#customUtility-container').size() + 1;

                $('#addUtility').live('click', function() {
                        $('#customUtility').val().appendTo(addDiv);
                        $('<p><label for="customUtility-container"><input type="text" id="customUtility" size="20" name="customUtility_' + i +'" value="" placeholder="" /></label> <a href="#" id="removeUtility">Remove</a></p>').appendTo(addDiv);
                        i++;
                        return false;
                });

                $('#removeUtility').live('click', function() {
                        if( i > 2 ) {
                                $(this).parents('p').remove();
                                i--;
                        }
                        return false;
                });

This creates another input field however; I just want to have one input box, have the user click Add, then it takes that value, puts it into the list, and clears the input box so the user can add something else again.

• javascript
• jquery

Share Improve this question Follow edited Sep 8, 2014 at 7:30 James Hill 61.9k2222 gold badges149149 silver badges166166 bronze badges asked Mar 14, 2012 at 19:14 OneSneakyMofoOneSneakyMofo 1,28922 gold badges1919 silver badges3333 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

Use jQuery's append() function

addDiv.append($('#customUtility').val());

Here's a working fiddle.

---

Warning: opinion below

When creating a variable to store a jQuery object, I think it's helpful to prefix the variable with $. This way, you know that you're working with a jQuery object. It also makes it easier for those ing behind you to recognize what you're doing:

var $addDiv = $('#customUtility-container');
$addDiv.append($('#customUtility').val());

Something like:

addDiv.html(addDiv.html() + whateveryouwanttoadd)

addDiv.append($('#customUtility').val());

Change

$('#customUtility').val().appendTo(addDiv);

To

addDiv.append($('#customUtility').val());

val() method gives the value of the input element and you cannot call a jQuery method on a string which will throw an error.

Working demo - http://jsfiddle/t9D8R/

I ended up scrapping everything and redoing it:

$(function() {
                var i = $('#customUtility-container').size() + 1;
                $("#addUtility").on("click", function() {
                    $("#customUtility-container").append('<div id ="customUtility_' + i +' " name="customUtility_' + i +' ">'+ $("#customUtility").val() + '<a href="#customUtility-container" id="removeUtility">Remove</a></div>');
                });

                $('#removeUtility').live('click', function() { $(this).closest('div').remove();
                                                i--;
                });     
        }); 

本文标签： javascriptAppend input value to a divStack Overflow