페이지의 정적 영역에 텍스트 추가

Question

텍스트 영역에 여러 줄이 있습니다.

<input type="checkbox" name="test1" /> Test1 <br /> 
<input type="checkbox" name="test2" /> Test2 <br /> 
<input type="checkbox" name="test3" /> Test3 <br /> 


<input type="text" name="testxtoadd" /> 
<input type="submit" value="Submit" /> 

나는 텍스트 상자에 예를 유지하려면 : 제출

<input type="checkbox" name="test4" /> Test4 <br /> 

을 검사하고 텍스트는 텍스트 3 후 상단에 추가해야합니다.

어떻게 이것을 달성 할 수 있습니다. 계속하는 방법을 모르겠다. 내가 패널/영역을 동적으로 업데이트하는 방법에 뭔가 빠졌습니까?

Answer 1

뭔가 : -

http://jsfiddle.net/ubvgt/

$(':Submit').click(function(){ 
    var elem = $('[name=testxtoadd]'); 
    elem.before($('<input>' , {type: "checkbox",value: elem.val() })). 
    before(elem.val() + "</br>"); 
}); 

Answer 2

각 입력란의 출처를 알 수 있도록 입력란 id를 지정하십시오.

제출 단추를 누르면 청취자가이를 인식하고 모든 입력 필드의 값을 확인할 수 있으므로 값을 가져 와서 처리 할 수 ​​있도록 사용자의 동작을 청취하는 수신기를 사용할 수 있습니다 네가 원하는 것처럼.

id가있는 div를 사용하여 페이지의 어딘가에 텍스트를 추가 한 다음 "해당 ID"가있는 요소에 값을 수신하도록 지시 할 수 있습니다. 당신이 당신의 질문 :) 더 정확하게 할 경우

$('#divId').html(inputTextThatWasSelected); 

좀 더 정확 수있는이 같은

Answer 3

LIVE DEMO

$(':submit').click(function(){ 

    var val = $('[name=testxtoadd]').val(); 

    if($.trim(val)){   // THIS WILL PREVENT EMPTY SUBMIT 
     var newHTML = '<input type="checkbox" name="'+val+'"> '+ val +'<br>'; 
     $(this).prev().before(newHTML); 
    } 

});