javaScript 如何动态生成HTML模块

需求:想用javaScript重复写下面的HTML模块100次,每次改变下面的几个值。业界最流行的写法是怎么样的?最好能给个完整的代码。
1)字符串“2,我有几个非常欣赏的老师”,用变量替换
2)name "TC2", 用变量替换

 <div class="form-group">                                                           
   <p class="col-md-6">                                                             
    2,我有几个非常欣赏的老师                                                 
   </p>                                                                             
   <div class="col-md-4">                                                           
     <select name="TC2" class="select2 full-width-fix required">                    
       <option value="">                                                            
       </option>                                                                    
       <option value="2">                                                           
            不对                                                                     
       </option>                                                                    
       <option value="4">                                                           
            比较不对                                                                 
       </option>                                                                    
       <option value="6">                                                           
            不清楚                                                                   
       </option>                                                                    
       <option value="8">                                                           
            比较对                                                                   
       </option>                                                                    
       <option value="10">                                                           
            非常对                                                                   
       </option>                                                                    
     </select>                                                                      
   </div>                                                                           
 </div>

土办法,搞定;以后可以再排版排得更好些,现在先凑合用着。

                                              <div class="tab-pane" id="tab4">
                                                <script type="text/javascript">                                             
                                                    for (var i=55; i<=72; i++) {
                                                            var str = "<div class='form-group'> <p class='col-md-6'>" +     titles[i-1] +   "</p>     <div class='col-md-5'>    <label class='radio-inline'>      <input type='radio' class='uniform required' name='TC" + i + "' value='10'>       非常对    </label>    <label class='radio-inline'>      <input type='radio' class='uniform required' name='TC" + i + "' value='8' >          比较对    </label>    <label class='radio-inline'>      <input type='radio' class='uniform required' name='TC" + i + "' value='6'>       不清楚    </label>    <label class='radio-inline'>      <input type='radio' class='uniform required' name='TC" + i + "' value='4'>       比较不对    </label>    <label class='radio-inline'>      <input type='radio' class='uniform required' name='TC" + i + "' value='2'>        不对    </label>  </div> </div>";

                                                            document.write(str);
                                                        }                                                                                                                                                                                                                
                                                </script>                                                                           
                                              </div>

https://segmentfault.com/q/1010000000312781&sa=U&ei=r2deU9qOGM6iyAS79YHIDg&ved=0CGMQFjAK&usg=AFQjC

cloneNode后,进行替换操作再添加到容器就行了