js 實現點擊按鈕 連續 增加多個輸入框

先貼上效果圖

點擊綠色的加號按鈕，下面會增加相同的SQL輸入框，點擊N次增加N個相同的輸入框。

步驟：

1 先看HTML

 

<div class="form-group row" id="div-SQL" style="margin-left: -200px;">
       <div for="objSqltext" class="col-md-4 control-label  text-right">
               <input name="addSQLBtn" type="image" src="img/****/add.jpg" οnclick="add****SQL()">
                <label>SQL：</label>
        </div>
        <div class="col-md-8">
              <textarea cols="1" rows="1" id="objSqltext" name="objSqltext"  class="form-control" style="height:120px;"></textarea>
         </div>

</div>

2 再看js代碼：

我使用的是在div標籤後面加上新的div元素、input元素等

 

var index=0;
  function addMutilSQL(){
   var addstep = index+1;
           $("#div-SQL").after('  <div class="form-group row" id="div-SQL'  + addstep + '" style="margin-left: -200px;" > '
                   +' <label for="obj****text + addstep + " class="col-md-4 control-label  text-right">SQL：</label> '
                   + ' <div class="col-md-8"> <textarea cols="1" rows="1" id="objSqltext + addstep + " name="objSqltext" '
                   + ' class="form-control" style="height:120px;"></textarea>'
                   + ' </div> ' +' </div> '
           );
           index+=1;
  }

在id="div-SQL"的div後面添加 新的 div

其中增加的多個id是逐漸加1操作。