如何使用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"> + '<div class="row">' + // ... '</div>'; document.getElementById('id').innerHTML = html; 如果觉得拼字符串麻烦，不妨尝试下模板引擎，或者试试vue、react啥的。 如果是后端返回的html片段： $('#id').load('/api/xxx');