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')
}