<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& ...
随机推荐
- redis的底层数据机构
集群架构 参考 https://blog.csdn.net/wcf373722432/article/details/78678504 https://www.cnblogs.com/George19 ...
- python - 数据描述符(class 内置 get/set/delete方法 )
数据描述符(class 内置 get/set/del方法 ): # 什么是描述符 # 官方的定义:描述符是一种具有“捆绑行为”的对象属性.访问(获取.设置和删除)它的属性时,实际是调用特殊的方法(_g ...
- python - class类 (四) 三大特性之一 :继承
继承: #继承 #什么时候用继承? # 1.当类之间有显著的不同,并且较小的类是较大的类的所需的组建时,用组合比较好. # 2.当类之间有很多相同的功能,提取这些共同的功能做成基类,用继承比较好 # ...
- CentOS 7以上版本Nginx开机自启
Nginx+Center OS 7.x 开机启动设置 centos 7以上是用Systemd进行系统初始化的,Systemd 是 Linux 系统中最新的初始化系统(init),它主要的设计目标是克服 ...
- WinEdt 和 Sumatra 双向关联设置
(1)配置PDF Viewer,在菜单栏选Options -> Execution Modes ->PDF Viewer ->点击右侧的"Browse"按钮,在弹 ...
- pyppeteer爬虫例子
如果在centos上使用,需要安装下面的依赖 yum install pango.x86_64 libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x8 ...
- springboot系列十五、springboot集成PageHelper
一.介绍 项目中经常会遇到分页,PageHelper为我们解决了这个问题.本质上实现了Mybatis的拦截器,作了分页处理. 二.配置PageHelper 1.引入依赖 pagehelper-spri ...
- centos7.2环境编译安装mysql5.5.48
一.安装cmake编译工具 跨平台编译器 查看是否已经安装了gcc # rpm -qa | grep gcc # yum install -y gcc-c++ # yum install -y cma ...
- PYTHON-基本数据类型-元祖类型,字典类型,集合类型-练习
# 1 有如下值集合 [11,22,33,44,55,66,77,88,99,90...],# 将所有大于 66 的值保存至字典的第一个key中,将小于 66 的值保存至第二个key的值中## 即: ...
- 【docker】将容器中数据拷贝到主机
参考:http://blog.csdn.net/yangzhenping/article/details/43667785 docker cp <containerId>:/file/pa ...