码迷,mamicode.com
首页 > 其他好文 > 详细

<script type="text/template">

时间:2018-01-29 11:44:38      阅读:172      评论:0      收藏:0      [点我收藏+]

标签:tag   head   get   执行   函数   inner   fun   节点   bsp   

<script type="text/template">

给<script>设置type="text/template",标签里面的内容不会被执行,也不会显示在页面上,但是可以在另一个script里面通过获取,然后再通过相关的模板工具进行处理,插入到页面中。这样就把大段的HTML操作从js里面分离开了

<div></div>

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

<div onclick="_dom()">

    <ul id="wrap">

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

    </ul>

</div>

</script>

1.首先这种写,在页面渲染的时候,浏览器不会读取script标签中的html代码

2.外面不能获取到里面的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‘)

                      }

 

<script type="text/template">

标签:tag   head   get   执行   函数   inner   fun   节点   bsp   

原文地址:https://www.cnblogs.com/lichihua/p/8375989.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!