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