<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. linux编程基础

    http://blog.csdn.net/jnu_simba/article/details/8806654

  2. 类型查找器 ITypeFinder

    NopCommerce为了支持插件功能,以及支持一些自动注册的功能.系统提供了类型查找器.ITypeFinder以及实现类就是提供此功能.通过类型查找器可以查找本程序域中的类,也可以查找整个bin目录 ...

  3. 各种电子面单_Api接口

    电子面单是一种通过热敏纸打印输出纸质物流面单的物流服务.通过热感应显示文字,打印速度比传统针式打印速度提升4~6倍.电子面单以接口形式嵌入到自己的系统.网站上,可以在自己的平台操作打印电子面单.   ...

  4. Java设计模式13:常用设计模式之桥接模式(结构型模式)

    1. Java之桥接模式(Bridge Pattern) (1)概述: 首先我们说一个生活中的例子:       就拿汽车在路上行驶的来说.即有小汽车又有公共汽车,它们都不但能在市区中的公路上行驶,也 ...

  5. 关于JDBC和ODBC的区别

    转载..... JDBC与ODBC都可以实现类似的功能,但JDBC与ODBC的区别是他们的开发架构不同,其实现细节上也有所差异. 谈到JDBC与ODBC的区别,JDBC和ODBC其实都是用来连接数据库 ...

  6. android中IdleHandler的使用

    IdleHandler 在API上面的解释如下: public final void addIdleHandler (MessageQueue.IdleHandler handler) 向消息队列中添 ...

  7. Jquery Easyui验证扩展,Easyui验证,Easyui校验,js正则表达式

    Jquery Easyui验证扩展,Easyui验证,Easyui校验,js正则表达式 >>>>>>>>>>>>>> ...

  8. 命令行创建Windows窗体应用程序

    csc:(C Sharp Compiler) 类似于 javac (java Compiler) 命令行的编译工具 位置:C:\Windows\Microsoft.NET\Framework\v4.0 ...

  9. 百度手机号码归属地查询api与返回json处理

    前天无意间在网上看到百度ApiStore,然后好奇就进去看了看.正好最近在某博培训Android,刚学到java基础.抱着锻炼的心态选择手机号码归属地查询api进行练手.api地址 (http://a ...

  10. UML——类和对象