<script type="text/x-template"> 模板
获取动态的js模板可以用art-template插件
<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/x-template"> 模板的更多相关文章
- 前端模板<script type="text/template" id="tmpl">
前端模板, 比连接字符串好用多了, 还可以使用循环\判断等语句, 减少工作量 <script type="text/template" id="member-tmp ...
- 关于 <script type='text/template' > 的妙用 / 使用jquery获取iframe加载完成事件
https://www.cnblogs.com/ddqyc/p/6200539.html <!DOCTYPE html> <html> <head> <met ...
- Js script type="text/template"的使用简单说明
<script type="text/template" id="treeTableTpl"> <tr id="{{row.id}} ...
- script标签中type为<script type="text/x-template">是个啥
写过一点前端的都会碰到需要使用JS字符串拼接HTML元素然后append到页面DOM树上的情况,一般的写法都是使用+号以字符串的形式拼接,如果是短点的还好,如果很长很长的话就会拼接到令人崩溃了. 比如 ...
- document.write('<script type=\"text/javascript\"><\/script>')
document.write('<script type=\"text/javascript\"><\/script>')
- <script type="text/html"></script> js模版使用
<div></div> <script type="text/html" id="javascript_template"> ...
- <script language = "javascript">, <script type = "text/javascript">和<script language = "application/javascript">(转)
application/javascript是服务器端处理js文件的mime类型,text/javascript是浏览器处理js的mime类型,后者兼容性更好(虽然application/ ...
- 哪种写法更好?<script></script> vs/or <script type=”text/javasript”></script>
一直很奇怪 哪种写法更好<script type=“text/javascript”>…</script> or <script>…</script>? ...
- <script type="text/template">是干什么的,为什么要把html写在js中? 这是什么编程语言风格,都能这样用吗?
这一段存放了一个模板.在js里面,经常需要使用js往页面中插入html内容.比如这样: var number = 123; $('#d').append('<div class="t& ...
随机推荐
- luogu P4082 [USACO17DEC]Push a Box
传送门 一个人推箱子,和之前的华容道中的棋子移动有异曲同工之妙,因为每次可以让人走到箱子的其他方向上,或者推一下箱子 所以状态可以设成\(f_{i,j,k}\),即箱子在\((i,j)\),人在\(k ...
- HDU4738 Caocao's Bridges【强连通】
题意: 曹操有N个岛,这些岛用M座桥连接起来,每座桥有士兵把守(也可能没有),周瑜想让这N个岛不连通,但只能炸掉一座桥,并且炸掉一座桥需要派出不小于守桥士兵数的人去,桥的守兵数为0时,也需要派出一个人 ...
- 自己对Java的一些认识
作为一个理论性比较强的学生,谈一下这段时间对java以及对程序设计的理解 java相对于其它语言有几个特点,一个是面向对象,一个是强类型 首先谈谈面向对象,关于类和对象,这个一定要有 ...
- mysql案例 ~ 主从复制延迟处理(3)
一 简介:今天咱们来汇总下如何避免主从延迟 二 方案: 1 集群硬件配置统一,磁盘组更好(SSD最佳),更大的内存 2 linux系统+mysql的配置参数已经优化 3 mysql从库没有任何慢语句进 ...
- jquery 学习(一) - 选择器
基本选择器(html) <div>123</div> <div id="n1">123</div> <span>321& ...
- iptables学习笔记_____摘自朱双印个人日志 ____http://www.zsythink.net/
iptables为我们预先定义了四张表 raw.mangle.nat.filter filter表负责过滤:允许那些ip访问.拒绝那些ip访问.允许那些端口...是最常用的表 #查看表里面所有的规则i ...
- 【网络编程1】网络编程基础-TCP、UDP编程
网络基础知识 网络模型知识 OSI七层模型:(Open Systems Interconnection Reference Model)开放式通信系统互联参考模型,是国际标准化组织(ISO)提出的一个 ...
- script & scriptreplay
script是什么 scirpt就是一个命令,可以制作一份记录输出到终端的记录.对于那些想要真实记录终端会话的人来说,这很有用.该记录可以保存并在以后再打印出来. 怎么用 默认情况下,我们可以通过在终 ...
- Libevent源码分析—event_base_dispatch()
我们知道libevent是一个Reactor模式的事件驱动的网络库. 到目前为止,我们已经看了核心的event和event_base结构体的源码,看了初始化这两个结构体的源码,看了注册event的 ...
- nodejs 文件拷贝
小文件拷贝 我们使用NodeJS内置的fs模块简单实现这个程序如下. var fs = require('fs'); function copy(src, dst) { fs.writeFileSyn ...