<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& ...
随机推荐
- CF1009E [Intercity Travelling]
这道题先考虑一种暴力n方做法 设\(f_i\)表示到\(i\)点所有情况的困难度之和(\(f_0=0\)),\(pre_i=\sum_{j=1}^{i} a_j\) 考虑从点\(j\)中途不经过休息站 ...
- idea的起步配置
工欲善其事,必先利其器 1.安装 https://www.jetbrains.com/idea/download/#section=windows 可以选择不同平台的安装包,版本一般Ultimate, ...
- jquery 学习(七) - 常用动态效果
<!--转载于 听说你的代码很6--><!--http://www.jq22.com/webqd2377--> CSS <style> #content #firs ...
- Freemarker取list集合中数据(将模板填充数据后写到客户端HTML)
1.模板写法: <html> <head> <title>freemarker测试</title> </head> <body> ...
- win7防火墙端口开放
https://jingyan.baidu.com/article/f96699bbadafca894f3c1b7a.html
- Linux时间日期类指令
⒈date [Options] 显示/设置当前日期 基本语法: date 显示当前时间 date +"%Y" 显示当前年份 date +"%m" 显示当前月份 ...
- Cython的简单使用
Cython是一个快速生成Python扩展模块的工具,从语法层面上来讲是Python语法和C语言语法的混血,当Python性能遇到瓶颈时,Cython直接将C的原生速度植入Python程序,这样使Py ...
- memset()函数
memset需要的头文件 <memory.h> or <string.h> memset <wchar.h> wmemset 函数介绍 void *memset( ...
- 蓝牙HID协议笔记【转】
蓝牙HID协议笔记 转自:http://blog.sina.com.cn/s/blog_69b5d2a50101emll.html 1.概述 The Human Interface Devic ...
- 四种加载React数据的技术对比(Meteor 转)
1.四种加载React数据的技术对比(Meteor 转) : https://sanwen8.cn/p/31e4kdE.html 2. Meteor + Appolo TelescopeJS/Te ...