<div></div>

<script type="text/html" 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/html"></script> js模版使用的更多相关文章

  1. document.write('<script type=\"text/javascript\"><\/script>')

    document.write('<script type=\"text/javascript\"><\/script>')

  2. 哪种写法更好?<script></script> vs/or <script type=”text/javasript”></script>

    一直很奇怪 哪种写法更好<script type=“text/javascript”>…</script> or <script>…</script>? ...

  3. <script language = "javascript">, <script type = "text/javascript">和<script language = "application/javascript">(转)

          application/javascript是服务器端处理js文件的mime类型,text/javascript是浏览器处理js的mime类型,后者兼容性更好(虽然application/ ...

  4. Js script type="text/template"的使用简单说明

    <script type="text/template" id="treeTableTpl"> <tr id="{{row.id}} ...

  5. <script type="text/x-template"> 模板

    获取动态的js模板可以用art-template插件 <script type="text/template"> 给<script>设置type=" ...

  6. 前端模板<script type="text/template" id="tmpl">

    前端模板, 比连接字符串好用多了, 还可以使用循环\判断等语句, 减少工作量 <script type="text/template" id="member-tmp ...

  7. script标签中type为<script type="text/x-template">是个啥

    写过一点前端的都会碰到需要使用JS字符串拼接HTML元素然后append到页面DOM树上的情况,一般的写法都是使用+号以字符串的形式拼接,如果是短点的还好,如果很长很长的话就会拼接到令人崩溃了. 比如 ...

  8. 关于 <script type='text/template' > 的妙用 / 使用jquery获取iframe加载完成事件

    https://www.cnblogs.com/ddqyc/p/6200539.html <!DOCTYPE html> <html> <head> <met ...

  9. <!--[if IE]><script type="text/javascript" src="matrix/js/html5.js"></script><![endif]-->代码解释

    块注释例子 1. <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->2. <!--[if IE]> 所有的I ...

随机推荐

  1. 一个想法(续二):换个角度思考如何解决IT企业招聘难的问题!

    前言: 上一篇文章:一个想法:成立草根技术联盟对开发人员进行技术定级解决企业员工招聘难问题! 当时写文的思维,是从一个公益组织的角度的思考. 因此,有不少关于从利出发的反方观点,的确是值的思考! 任何 ...

  2. python实现之极简stack和queue

    用python实现一个极简的stack和queue,那是so easy的事情了,简洁易懂,适合小白~ 直接上代码吧: node: class LinkNode: def __init__( self, ...

  3. DataBase 之 数据库中的系统表

    名称                       地址                                                        说明 sysaltfiles    ...

  4. jQuery的动画效果

    jQuery 是一个 JavaScript 库.jQuery 库可以通过一行简单的标记被添加到网页中. <script type="text/javascript" src= ...

  5. 从wordcount 开始 mapreduce (C++\hadoop streaming模式)

    序:终于开始接触hadoop了,从wordcount开始 1. 采用hadoop streamming模式 优点:支持C++ pathon shell 等多种语言,学习成本较低,不需要了解hadoop ...

  6. hibernate 查询

                String hql = "select * from Commodity where commodityName like :commodityname" ...

  7. Mysql 死锁相关操作

    该随笔随时记录日常工作中遇到的关于mysql的死锁相关问题 1)查看mysql当前的处理线程(connection) mysql> show processlist; 2)杀掉对应的connec ...

  8. cvSaveImage的第三个参数

    http://stackoverflow.com/questions/801054/opencv-cvsaveimage-jpeg-compression-factor   #define CV_IM ...

  9. Android中更新视图的函数onDraw()和dispatchdraw()函数的区别

    Android的view组件显示主要经过mesure, layout和draw这三个过程.在mesure阶段里调用mesure(int widthSpec, int heightSpec)方法,这个方 ...

  10. 【XMLRPC实现跨语言编程】Tcl <----> python

    转载请声明出处,谢谢合作. # 期望一种能实现tcl.python两者解释器能双向通讯的结合体# py->tcl: from Tkinter import Tcl; tcl = Tcl(); t ...