layui 动态加载script标签没有加载到dom树里面便执行table.render

layui 的数据表格功能非常强大，有的功能在应用的时候，因为不想写太多的代码，所以就能省则省，根据需要动态载入。比如，

表格的toolbar。可以根据不同的用户类型载入不同的tool按钮。这个时候就需要jq判断后，再动态确认是否需要载入某个按钮。

我们知道，表格的toolbar是基于页面上的

<script type="text/html" id="demon"><a>按钮一</a><a>按钮二</a></script>

这一个script块来加载实现的，所以如果动态加入按钮的话，需要如下方法实现：

let scripts='<script id="barDemo"><a>按钮一</a><a>按钮二</a></script>'
$('body').append(scripts)
table.render({
  cols: [[
    {field:'id', title:'ID', width:100}
    ,{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
  ]]
});

但是出现一个问题，就是加载不上。遍查网络，搜到如下原因：

在append之后，DOM树更新了，但是浏览器的redraw还没有完成，这个时候对刚append上去的元素做操作是会失败的。比较简单的解决方案一个是加setTimeout，时间为0都可以(在我遇到的问题中是这样)；或者，在append函数之后加.hide().show()，但是还不清楚如果是移动端，低端机上这样做元素会不会有闪动。

基于以上理由，首先添加了

setTimeout(function(){
    table.render({
    })},300)

来进行延迟加载，script标签上去了，但并没有被加载。最后在贤心祖师的指导下，改为了如下代码，终于加载成功。

let scripts='<div class="layui-hidden" id="barDemo"><a>按钮一</a><a>按钮二</a></div>'
$('body').append(scripts)
table.render({
  cols: [[
    {field:'id', title:'ID', width:100}
    ,{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
  ]]
});