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

나는 모든 것을 폐기하고 다시 실행 결국 :

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

Answer 2

뭔가 :

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

Answer 3

사용 jQuery의 append() 기능

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

여기 a working fiddle입니다.

---

경고 :

아래 의견 JQuery와 객체를 저장하는 변수를 작성, 나는 그것이 $와 변수를 접두사로 도움 생각합니다. 이렇게하면 jQuery 객체로 작업한다는 것을 알 수 있습니다. 방법의 가치를 제공

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

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

val()

에

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

Answer 4

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

Answer 5

변경 : 그것은 또한 당신이 무슨 일을하는지 인식 뒤에 오는 사람들을 위해 쉽게한다 input 요소와 오류를 던질 문자열에 대해 jQuery 메서드를 호출 할 수 없습니다. -

근무 데모 http://jsfiddle.net/t9D8R/