获取动态的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"> 模板的更多相关文章

  1. 前端模板<script type="text/template" id="tmpl">

    前端模板, 比连接字符串好用多了, 还可以使用循环\判断等语句, 减少工作量 <script type="text/template" id="member-tmp ...

  2. 关于 <script type='text/template' > 的妙用 / 使用jquery获取iframe加载完成事件

    https://www.cnblogs.com/ddqyc/p/6200539.html <!DOCTYPE html> <html> <head> <met ...

  3. Js script type="text/template"的使用简单说明

    <script type="text/template" id="treeTableTpl"> <tr id="{{row.id}} ...

  4. script标签中type为<script type="text/x-template">是个啥

    写过一点前端的都会碰到需要使用JS字符串拼接HTML元素然后append到页面DOM树上的情况,一般的写法都是使用+号以字符串的形式拼接,如果是短点的还好,如果很长很长的话就会拼接到令人崩溃了. 比如 ...

  5. document.write('<script type=\"text/javascript\"><\/script>')

    document.write('<script type=\"text/javascript\"><\/script>')

  6. <script type="text/html"></script> js模版使用

    <div></div> <script type="text/html" id="javascript_template"> ...

  7. <script language = "javascript">, <script type = "text/javascript">和<script language = "application/javascript">(转)

          application/javascript是服务器端处理js文件的mime类型,text/javascript是浏览器处理js的mime类型,后者兼容性更好(虽然application/ ...

  8. 哪种写法更好?<script></script> vs/or <script type=”text/javasript”></script>

    一直很奇怪 哪种写法更好<script type=“text/javascript”>…</script> or <script>…</script>? ...

  9. <script type="text/template">是干什么的,为什么要把html写在js中? 这是什么编程语言风格,都能这样用吗?

    这一段存放了一个模板.在js里面,经常需要使用js往页面中插入html内容.比如这样: var number = 123; $('#d').append('<div class="t& ...

随机推荐

  1. [USACO]地震 (二分答案+最优比率生成树详解)

    题面:[USACO 2001 OPEN]地震 题目描述: 一场地震把约翰家的牧场摧毁了, 坚强的约翰决心重建家园. 约翰已经重建了N个牧场,现在他希望能修建一些道路把它们连接起来.研究地形之后,约翰发 ...

  2. linux matlab2016 安装

    1. 下载Matlab 2016b 下载文件夹中包含三个文件:Matlab 2016b Linux64 Crack.rar,R2016b_glnxa64_dvd1.iso,R2016b_glnxa64 ...

  3. 搭建Modelsim SE仿真环境-使用do文件仿真

    本章我们介绍仿真环境搭建是基于Modelsim SE的.Modelsim有很多版本,比如说Modelsim-Altera,但是笔者还是建议大家使用Modelsim-SE,Modelsim-Altera ...

  4. C# 无法识别的消息版本。

    问题:最近跟OA的java项目做审核接口,调用接口时提示"无法识别的消息版本.“ 解决:一直以为是协议不兼容,查了半天,最终发现是这个项目.net framework版本太低,升级为高版本即 ...

  5. 【vim】把当前文件转化为网页

    这会生成一个 HTML 文件来显示文本,并在分开的窗口显示源代码: :%TOhtml (译者注:原文是 :%Tohtml,但在我的电脑上是 :%TOhtml) 转载自:https://linux.cn ...

  6. 董事局主席董事长总裁首席执行官CEO总裁董事监事区别

    董事长是公司的最大股东:董事长是董事会的主席,一般是企业的所有者,掌握企业的股权并且决定企业的发展策略. 董事局主席通常是在大财团中才会出现,董事局主席管数个董事长,一个大财团涉及很多方面的业务,因此 ...

  7. ERROR 1067 (42000): Invalid default value for 'created_time'【转】

    执行表增加字段语句报错 mysql> ALTER TABLE ha_question ADD COLUMN question_number INT; ERROR (): Invalid defa ...

  8. Python3学习笔记16-错误和异常

    使用try...except可以处理异常 异常处理 import sys try: print('try...') r = 10/0 print('result:',r) except ZeroDiv ...

  9. 『转载』hadoop2.x常用端口、定义方法及默认端口

    『转载』hadoop2.x常用端口.定义方法及默认端口 1.问题导读 DataNode的http服务的端口.ipc服务的端口分别是哪个? NameNode的http服务的端口.ipc服务的端口分别是哪 ...

  10. mysql caching_sha2_password异常分析

    使用navicat连接mysql报错 解决办法: 通过命令行登录mysql后,输入: alter user 'root'@'localhost' IDENTIFIED WITH mysql_nativ ...