js模板获取不到DOM元素

在开发中遇到了一个问题,使用js一直获取不到dom元素..找了好久终于找到一个可行的方案:

代码以下:

<script id='tpl_order_index_list' type='text/html'>
        <%each list as order%>
        <div class='fui-list-group order-item' data-orderid="<%order.id%>" data-verifycode="<%order.verifycode%>">
            <div class='fui-list-group-title lineblock2 '>
                订单号: <%order.ordersn%>
                <span class='status <%order.statuscss%>'><%order.statusstr%></span>
            </div>
            <%each order.goods[0].goods as g%>
            <div class="fui-list goods-list">
                <a class="good-box" href="{php echo mobileUrl('order/detail')}&id=<%order.id%>" data-nocache='true'>
                    <div class="fui-list-media" style="<%if g.status==2%><%/if%>">
                        <img data-lazy="<%g.thumb%>" class="">
                    </div>
                    <div class="fui-list-inner">
                        <div class="text goodstitle towline"><%if g.seckill_task%><span class="fui-label fui-label-danger"><%g.seckill_task.tag%></span><%/if%><%g.title%></div>
                        <%if g.status==2%><span class="fui-label fui-label-danger">赠品</span><%/if%>
                        <%if g.optionid!='0'%><div class='subtitle'  style="color:#999;"><%g.optiontitle%></div><%/if%>
                        <%if order.status==1%>
                            <%if !g.shidai_workid%>
                                <span class="text goodstitle towline design-status">无设计</span>
                            <%else%>
                                <span class="text goodstitle towline design-status"><%if g.shidai_status==0%>设计中<%else%>已设计<%/if%></span>
                            <%/if%>
                        <%/if%>
                        <!-- 订单列表添加显示做品名称 -->
                        <%if g.shidai_workname!=''%><div class='subtitle'  style="color:#999;">在线设计做品：<%g.shidai_workname%></div><%/if%>

                    </div>
                </a>
                
                <div class="fui-list-angle">
                    &yen; <span class="marketprice"><%g.price/g.total%><br/>    <span style="color: #999">x<%g.total%></span><br/>
                    <%if order.status==1%>
                        <%if g.option_muban_lianjie%>
                            <span class="designBtn btn btn-sm btn-default-o" data-goodId="<%g.id%>" data-diyType="<%g.designtype%>" data-Url="<%g.option_muban_lianjie%>" onclick="design(this)">在线设计</span>
                        <%else%>
                            <span class="designBtn btn btn-sm btn-default-o" data-goodId="<%g.id%>" data-diyType="<%g.designtype%>" data-Url="<%g.muban_lianjie%>"" onclick="design(this)">在线设计</span>
                        <%/if%>
                    <%/if%>
                </div>
                
            </div>
            <%/each%>

                <div class="fui-list-group-title lineblock">
                    <span class="status noremark">共 <span><%order.goods.length%></span> 个商品 实付: <span class='text-danger'>&yen; <span class="bigprice"><%order.price%></span></span></span>
                </div>
           
            <div class="fui-list-group-title lineblock   opblock" >
        <span class="status noremark">

        <%if order.userdeleted==1%>
            <%if order.status==3 || order.status==-1%>
            <div class="btn btn-default btn-default-o order-deleted" data-orderid="<%order.id%>">完全删除订单</div>
            <%/if%>
            <%if order.status==3%>
            <div class="btn btn-default btn-default-o order-recover" data-orderid="<%order.id%>">恢复订单</div>
            <%/if%>
        <%/if%>


        <%if order.userdeleted==0%>
      <%if order.status==0%>
        <div class="btn btn-default btn-default-o order-cancel">取消订单
            <select data-orderid="<%order.id%>"class="btn btn-sm btn-default-o">
                <option value="">不取消了</option>
                <option value="我不想买了">我不想买了</option>
                <option value="信息填写错误，从新拍">信息填写错误，从新拍</option>
                <option value="同城见面交易">同城见面交易</option>
                <option value="其余缘由">其余缘由</option>
            </select>
        </div>
        <%if order.paytype!=3%>
        <a class="btn btn-sm btn-danger-o external" href="{php echo mobileUrl('order/pay')}&id=<%order.id%>" data-nocache="true" >支付订单</a>
        <%/if%>
    <%/if%>

    <%if order.canverify&&order.status!=-1&&order.status!=0%>
    <div class="btn btn-sm btn-danger-o order-verify" data-nocache="true" data-orderid="<%order.id%>" data-verifytype="<%order.verifytype%>" style="margin-left:.5rem;" >
        <i class="icon icon-erweimazhuanhuan"></i>
        <span><%if order.dispatchtype==1%>我要取货<%else%>我要使用<%/if%></span>
    </div>
    <%/if%>

    <%if order.status==3 || order.status==-1%>
    <div class="btn btn-default btn-default-o order-delete" data-orderid="<%order.id%>">删除订单</div>
    <%/if%>

    {if empty($trade['closecomment'])}
    <%if order.status==3 && order.iscomment==1%>
    <a class="btn btn-default btn-default-o" data-nocache="true" href="{php echo mobileUrl('order/comment')}&id=<%order.id%>">追加评价</a>
    <%/if%>

    <%if order.status==3 && order.iscomment==0%>
    <a class="btn btn-sm btn-danger-o" data-nocache="true" href="{php echo mobileUrl('order/comment')}&id=<%order.id%>">评价</a>
    <%/if%>
    {/if}

    <%if order.status>1 && order.addressid>0%>
    <a class="btn btn-default btn-default-o" href="{php echo mobileUrl('order/express')}&id=<%order.id%>" data-nocache="true">查看物流</a>
    <%/if%>

    <%if order.status==2%>
    <div class="btn btn-sm btn-danger-o order-finish" data-orderid="<%order.id%>">确认收货</div>
    <%/if%>

    <%if order.canrefund%>
            <a class="btn btn-default btn-default-o" data-nocache="true" href="{php echo mobileUrl('order/refund')}&id=<%order.id%>"><%if order.status==1%>申请退款<%else%>申请售后<%/if%><%if order.refundstate>0%>中<%/if%></a>
            <%/if%>
        <%/if%>

        </span>
            </div>
        </div>
        <%/each%>
    </script>
    
    <script type='text/javascript'>
        function design(current) {
            var diyUrl = $(current).data('url'),
                diyType = $(current).data('diytype'),
                goodId = $(current).data('goodid'),
                otherParam = diyType > 0 ? ('-ver='+ (diyType*1 + 1)): '',
                single = diyUrl.search(/(\/mobile\/design\/)|(\/design\/designwork\.aspx)/gi) != -1,
                oparmCut = single ? '$oparm=' : '#',
                jumpUrl = diyUrl + oparmCut + goodId + otherParam;
            location.href = jumpUrl;
        }
    </script>
    
    {if com('verify')}
    {template 'order/verify'}
    {/if}

缘由:

<script type="text/html" id="javascript_template">

在模板渲染时js已经所有执行完了,致使js获取不到dom元素...

这种写法，在页面渲染的时候，浏览器不会读取script标签中的html代码, 外面不能获取到里面的div节点

因此：
在使用时，要在script标签上加个ID能够供咱们找到它，
即然作模版用，且里面的html代码不会被渲染读取，则需在外面再新建一个div来当容器，装下这些html代码，
即咱们能够经过

var _html=document.getElementById('javascript_template').innerHTML;
document.getElementsByTagName('div')[0].innerHTML=_html;

而后咱们模版里的htmll代码就能够运行在页面中了;

解决:

若是遇到html代码加入外部div后，获取不到节点的状况，能够在外部写个函数，而后在html内部用行内调用 onclick="_dom()"

function _dom() {
    document.getElementById('wrap')
}