<script type="text/html"></script> js模版使用
<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模版使用的更多相关文章
- document.write('<script type=\"text/javascript\"><\/script>')
document.write('<script type=\"text/javascript\"><\/script>')
- 哪种写法更好?<script></script> vs/or <script type=”text/javasript”></script>
一直很奇怪 哪种写法更好<script type=“text/javascript”>…</script> or <script>…</script>? ...
- <script language = "javascript">, <script type = "text/javascript">和<script language = "application/javascript">(转)
application/javascript是服务器端处理js文件的mime类型,text/javascript是浏览器处理js的mime类型,后者兼容性更好(虽然application/ ...
- Js script type="text/template"的使用简单说明
<script type="text/template" id="treeTableTpl"> <tr id="{{row.id}} ...
- <script type="text/x-template"> 模板
获取动态的js模板可以用art-template插件 <script type="text/template"> 给<script>设置type=" ...
- 前端模板<script type="text/template" id="tmpl">
前端模板, 比连接字符串好用多了, 还可以使用循环\判断等语句, 减少工作量 <script type="text/template" id="member-tmp ...
- script标签中type为<script type="text/x-template">是个啥
写过一点前端的都会碰到需要使用JS字符串拼接HTML元素然后append到页面DOM树上的情况,一般的写法都是使用+号以字符串的形式拼接,如果是短点的还好,如果很长很长的话就会拼接到令人崩溃了. 比如 ...
- 关于 <script type='text/template' > 的妙用 / 使用jquery获取iframe加载完成事件
https://www.cnblogs.com/ddqyc/p/6200539.html <!DOCTYPE html> <html> <head> <met ...
- <!--[if IE]><script type="text/javascript" src="matrix/js/html5.js"></script><![endif]-->代码解释
块注释例子 1. <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->2. <!--[if IE]> 所有的I ...
随机推荐
- Ng-include 例子
<body> <div ng-app="myApp"> <div ng-controller="firstController"& ...
- 关于mybatis用mysql时,插入返回自增主键的问题
公司决定新项目用mybatis,虽然这个以前学过但是一直没用过都忘得差不多了,而且项目比较紧,也没时间去系统点的学一学,只好很粗略的百度达到能用的程度就行了. 其中涉及到插入实体要求返回主键id的问题 ...
- DefaultSingletonBeanRegistry extends SimpleAliasRegistry implements SingletonBeanRegistry
// 用于内部标记的空的单例对象(不支持null)protected static final Object NULL_OBJECT = new Object(); // 缓存单例对象根据beanNa ...
- How to solve Original Tango programmer”Hardware not Found”?
Original Tango programmer is a new generation of transponder programmer which is developed to cover, ...
- ResponseBody的使用
使用Spring的@ResponseBody有时还是挺方便的,在ajax调用返回纯字符串时有中文编码问题. @ResponseBody @RequestMapping(value="/dec ...
- mount: can't find cdrom in /etc /fstab or /etc/mtab
我用的linux操作系统类别是CentOS-6.5 首先在虚拟机选项的设置里设置CD/DVD选项其中勾选Connect at power on选项 在连接中选择Use ISO image file:即 ...
- plsql设置窗口默认格式
一:plsql设置窗口默认格式 窗口视图设置完毕后,选择“窗口”菜单——点击“保存”版面. 等到下次重启后,就会呈现保存的版面. OK,设置完毕!
- angularjs $state.go 传参
在目标页面规定接受的参数:$stateProvider.state('page2', {params: {'data': null}}) 传参:$state.go('page2', {data: 'a ...
- hdu 4670 树的点分治
思路:首先当然是要用树的点分治了.根节点为root,那么经过root的合法路径数求出来这题就解决了.因为我们可以用分治枚举根,最后将所有根的路径数加起来就是结果.当然这里的根不是整棵树的根,是子树根. ...
- Android中更新视图的函数onDraw()和dispatchdraw()函数的区别
Android的view组件显示主要经过mesure, layout和draw这三个过程.在mesure阶段里调用mesure(int widthSpec, int heightSpec)方法,这个方 ...