如何使用js动态加载大量html代码？？

Question

1， 首先需要说明 不使用在html 页面中隐藏 这段html代码，或者使用script标签暂时存放这段代码，

原因是当这段代码太多的时候很难看

示例代码，每当点击一个按钮之后就会动态添加 下面的这个组件到指定id的div上面。 问题是如何生成这段html代码对应的dom对象？

   <div class="form-group well" id="23">

                            <div class="row ">

                                <button type="button" class="close btn btn-primary " aria-label="Close "><span

                                        aria-hidden="true" style="font-size: 40px">×</span></button>

                            </div>

                            <div class="row good_item_div">

                                <div class="col-md-1"><label>货物名称</label></div>

                                <div class="col-md-5">

                                    <input type="text" class="form-control" name="item_title"

                                           placeholder="仓库地址"/>

                                </div>

                            </div>

                           

                        </div>

Answer 1

如果是前端生成：var html += '<div class="form-group well" id="23"> +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '<div class="row">' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // ...&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '</div>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;document.getElementById('id').innerHTML = html;如果觉得拼字符串麻烦，不妨尝试下模板引擎，或者试试vue、react啥的。如果是后端返回的html片段：$('#id').load('/api/xxx');