<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. 在一个文件中有10G个整数,乱序排列,要求找出中位数

     题目:在一个文件中有 10G 个整数,乱序排列,要求找出中位数.内存限制为 2G.只写出思路即可(内存限制为 2G的意思就是,可以使用2G的空间来运行程序,而不考虑这台机器上的其他软件的占用内存). ...

  2. Understanding Spring Web Application Architecture: The Classic Way--转载

    原文地址:http://www.petrikainulainen.net/software-development/design/understanding-spring-web-applicatio ...

  3. 解析mysql索引

    在mysql中,索引是存储引擎用于快速查找到目标记录的一种数据结构.常见的索引类型包含B树索引.哈希索引.空间索引(R-Tree).全文索引等. 索引是在存储引擎层实现的,不同的存储引擎对索引的工作方 ...

  4. visual studio 2013 c++ 打开code map 功能

    属性->c++ -> Browse Infomation -> Enable Browse Infomation设为true http://msdn.microsoft.com/li ...

  5. 琐碎-关于StringTokenizer工具

    属于:java.util包 构造函数: 1. StringTokenizer(String str):构造一个用来解析str的StringTokenizer对象.java默认的分隔符是“空格”.“制表 ...

  6. Javascript 数组与字典

    Javascript 的数组Array,既是一个数组,也是一个字典(Dictionary). 先举例看看数组的用法. var a = new Array(); a[0] = "Acer&qu ...

  7. ubuntu14_pip 安装

    1:install pip python-dev    sudo apt-get install python-dev    sudo apt-get install libevent-dev     ...

  8. ZOJ 3122 Sudoku

    Sudoku Time Limit:10000MS     Memory Limit:32768KB     64bit IO Format:%lld & %llu Submit Status ...

  9. [改善Java代码]推荐覆写toString方法

    建议49: 推荐覆写toString方法 为什么要覆写toString方法,这个问题很简单,因为Java提供的默认toString方法不友好,打印出来看不懂,不覆写不行,看这样一段代码: public ...

  10. Windows 8.1 归档 —— Step 3 软件的选择与安装

    这里我将列举出一些 Windows 8.1 下实用的软件 --运行库-- 用精简版系统或者绿色版软件时,使用软件经常遇见的情况是“由于应用程序配置不正确,应用程序未能启动”,提示缺少dll文件等.大部 ...