如何使用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');