将输入值附加到 div

Question

有人可以告诉我如何在用户单击“添加”链接后获取输入值并将其附加到 div 中吗？

这是我能做的最好的了。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;
                });

然而，这会创建另一个输入字段；我只想有一个输入框，让用户单击“添加”，然后获取该值，将其放入列表中，并清除输入框，以便用户可以再次添加其他内容。

Answer 1

使用jQuery的append()函数

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

这是一个工作小提琴。

警告：以下意见

当创建一个变量来存储 jQuery 对象时，我认为在变量前面加上$. 这样，您就知道您正在使用 jQuery 对象。它还可以让后面的人更容易识别您在做什么：

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