将输入值附加到 div答案

【问题标题】：Append input value to a div将输入值附加到 div
【发布时间】：2012-03-14 19:14:45
【问题描述】：

一旦用户点击添加链接，有人可以告诉我如何获取输入值并将其附加到 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;
                });

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

【问题讨论】：

标签： javascript jquery

【解决方案1】：

使用jQuery的append()函数

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

这里是a working fiddle。

警告：以下意见

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

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

【讨论】：

【解决方案2】：

类似：

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

改变

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

到

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

val() 方法给出了输入元素的值，你不能对一个会抛出错误的字符串调用 jQuery 方法。

工作演示 - http://jsfiddle.net/t9D8R/

【讨论】：

【解决方案5】：

我最终把所有东西都报废并重做：

$(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--;
                });     
        });

【讨论】：