JQuery 또는 Javascript에서 HTML 형식 추가

Question

일부 HTML FORM 코드를 추가하려고하지만 내 코드에 문제가있는 것으로 보입니다. '다른 경험 추가'버튼을 클릭하면 필수 입력란으로 이동 한 다음 '입력란을 작성하십시오'라고 말합니다. 무슨 문제가있는 것 같습니까? 여기 내 HTML 코드입니다 :

<div class="form-group row" style="width: 100%;"> 
           <div class="col-md-12 exp"> 
            <label for="exp"><br>Do you have call center experience? &nbsp;&nbsp;&nbsp;</label> 
            <label class="radio-inline"><input type="radio" name="exp" id="exp" value="Yes">Yes</label> 
            <label class="radio-inline"><input type="radio" name="exp" id="exp" value="No">No</label> 
            <br> 
            <label for="exp"><br>Did you have any language training? &nbsp;&nbsp;&nbsp;</label> 
            <label class="radio-inline"><input type="radio" name="training" id="training" value="Yes">Yes</label> 
            <label class="radio-inline"><input type="radio" name="training" id="training" value="No">No</label> 
            <br> 
            <label for="exp"><br><br>Company Name: &nbsp;&nbsp;&nbsp;</label> 
            <input type="input" style="width: 60%;" class="form-control" id="company_name" placeholder="Company Name"> 
            <br> 
            <label for="exp"><br><br>Position: &nbsp;&nbsp;&nbsp;</label> 
            <input type="input" class="form-control" id="position" placeholder="Position"> 
            <label for="bday">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Duration: &nbsp;&nbsp;&nbsp;</label> 
            <input id="date-picker-2" type="date" class="date-picker form-control" placeholder="Date Started"/> 
            <input id="date-picker-3" type="date" class="date-picker form-control" placeholder="Date Ended"/>&nbsp;<input type="checkbox" id="present" value="present">&nbsp;Present 
            <br><br><br> 
            <button class="btn btn-primary add_exp1" >Add another experience</button> 
           </div> 
          </div 

그리고 여기 내 jQuery 코드입니다 :

$(".add_exp1").click(function(){ 
      $(".exp").append('<br> 
            <label for="exp">Another Work Experience<br><br>Company Name: &nbsp;&nbsp;&nbsp;</label> 
            <input type="input" style="width: 60%;" class="form-control" id="company_name" placeholder="Company Name"> 
            <br> 
            <label for="exp"><br><br>Position: &nbsp;&nbsp;&nbsp;</label> 
            <input type="input" class="form-control" id="position" placeholder="Position"> 
            <label for="bday">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Duration: 
&nbsp;&nbsp;&nbsp;</label> 
            <input id="date-picker-2" type="date" class="date-picker form-control" placeholder="Date Started"/> 
            <input id="date-picker-3" type="date" class="date-picker form-control" placeholder="Date Ended"/>&nbsp;<input type="checkbox" 
id="present" value="present">&nbsp;Present 
            <br><br><br>');   }); 

Answer 1

: 그건 여러 문자열을 사용하는 올바른 방법입니다. html로에서 머리

<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script> 
     <script> 
      $(document).ready(function() { 
       $(".add_exp1").click(function(){ 
        $(".exp").append('<br><label for="exp">Another Work Experience<br><br>Company Name: &nbsp;&nbsp;&nbsp;</label>' + 
         '<input type="input" style="width: 60%;" class="form-control" id="company_name" placeholder="Company Name">'+ 
         '<br>'+ 
         '<label for="exp"><br><br>Position: &nbsp;&nbsp;&nbsp;</label>'+ 
         '<input type="input" class="form-control" id="position" placeholder="Position">'+ 
         '<label for="bday">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Duration:'+ 
         '&nbsp;&nbsp;&nbsp;</label>'+ 
         '<input id="date-picker-2" type="date" class="date-picker form-control" placeholder="Date Started"/>'+ 
         '<input id="date-picker-3" type="date" class="date-picker form-control" placeholder="Date Ended"/>&nbsp;<input type="checkbox"'+ 
         'id="present" value="present">&nbsp;Present'+ 
         '<br><br><br>');  

       }); 

      }) 


     </script> 

그리고 몸에

JQuery와는 당신과 동일합니다. 유일한 변경 사항은 html의 새 요소에 대한 문자열 추가입니다. 여러 줄을 사용하려면 이스케이프하거나 문자열을 추가해야합니다.

Answer 2

당신이하여 문자 줄 바꿈을 피할 수있는 자바 스크립트 코드에서 여러 줄 문자열을 추가 '\', 그렇지 않으면 줄 바꿈 기호가 중단됩니다 당신의 js 코드. 난 그냥 이렇게 작업 한

$(".add_exp1").click(function(){ 
      $(".exp").append('<br>\ 
          <label for="exp">Another Work Experience<br><br>Company Name: &nbsp;&nbsp;&nbsp;</label>\ 
            <input type="input" style="width: 60%;" class="form-control" id="company_name" placeholder="Company Name">\ 
            <br>\ 
            <label for="exp"><br><br>Position: &nbsp;&nbsp;&nbsp;</label>\ 
            <input type="input" class="form-control" id="position" placeholder="Position">\ 
            <label for="bday">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Duration:\ 
&nbsp;&nbsp;&nbsp;</label>\ 
            <input id="date-picker-2" type="date" class="date-picker form-control" placeholder="Date Started"/>\ 
            <input id="date-picker-3" type="date" class="date-picker form-control" placeholder="Date Ended"/>&nbsp;<input type="checkbox"\ 
id="present" value="present">&nbsp;Present\ 
            <br><br><br>');   }); 

Here is working fiddle

Answer 3

가장 간단한 방법은 div에 복제하려는 html의 일부를 줄이는 두 가지 방법이 있습니다. 당신의 HTML에서 : 나는 id = "partialForm" 과 사업부에서 양식의 일부를 감싸

<div class="form-group row" style="width: 100%;"> 
           <div class="col-md-12 exp"> 
            <label for="exp"><br>Do you have call center experience? &nbsp;&nbsp;&nbsp;</label> 
            <label class="radio-inline"><input type="radio" name="exp" id="exp" value="Yes">Yes</label> 
            <label class="radio-inline"><input type="radio" name="exp" id="exp" value="No">No</label> 
            <br> 
            <label for="exp"><br>Did you have any language training? &nbsp;&nbsp;&nbsp;</label> 
            <label class="radio-inline"><input type="radio" name="training" id="training" value="Yes">Yes</label> 
            <label class="radio-inline"><input type="radio" name="training" id="training" value="No">No</label> 
            <br> 
            <div id ="partialForm"> 
            <label for="exp"><br><br>Company Name: &nbsp;&nbsp;&nbsp;</label> 
            <input type="input" style="width: 60%;" class="form-control" id="company_name" placeholder="Company Name"> 
            <br> 
            <label for="exp"><br><br>Position: &nbsp;&nbsp;&nbsp;</label> 
            <input type="input" class="form-control" id="position" placeholder="Position"> 
            <label for="bday">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Duration: &nbsp;&nbsp;&nbsp;</label> 
            <input id="date-picker-2" type="date" class="date-picker form-control" placeholder="Date Started"/> 
            <input id="date-picker-3" type="date" class="date-picker form-control" placeholder="Date Ended"/>&nbsp;<input type="checkbox" id="present" value="present">&nbsp;Present 
            </div> 
            <br><br><br> 
            <button class="btn btn-primary add_exp1" >Add another experience</button> 
           </div> 
          </div> 

그럼 내가 JQuery와이 부분을 clonned 및 추가 특정 HTML 요소 여기

$(".add_exp1").click(function(){ 

    var newForm= $("#partialForm").clone(); 
    $('input',newForm).val(''); 
    var generatedBr = $(document.createElement('br')); 
    var header = $(document.createElement('label')) 
         .attr('for','exp') 
         .text('Another Work Experience'); 
    $('.exp').append(generatedBr, 
        header, 
        newForm); 
}); 

는 작업 바이올린입니다 : http://jsfiddle.net/defee/nna15kph/ 또 다른 방법은 모범 사례를 사용하여 javascript에서 HTML을 생성하는 것입니다.

여기 예를 들어 어떻게 JQuery와의 입력 생성 할 수있다 :

var dateStartInput = $(document.createElement('input')) 
      .attr('id','date-picker-2') 
      .attr('type','date') 
      .attr('placeholder','Date Started') 
      .addClass('date-picker form-control');