javascript - 将输入值附加到 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());

这是 a working fiddle .

---

警告:意见如下

当创建一个变量来存储 jQuery 对象时，我认为在变量前加上 $ 前缀会很有帮助。这样，您就知道您正在使用 jQuery 对象。这也让跟在你身后的人更容易认出你在做什么:

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