<script type="text/template">
2018-01-29 09:56
447 查看
<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')
}
相关文章推荐
- 【Web】<script type="text/template"></script>适合用于定义模板(模板容器),不解析(渲染/执行)
- script标签中type为<script type="text/x-template">是个啥
- <script language = "javascript">, <script type = "text/javascript">和<script language = "application/javascript">(转)
- <mvc:resources mapping="/js/**" location="/js/**"/> <script type="text/javascript" src="<%=reques
- <script type="text/html"></script> js模版使用
- <script language="javascript" type="text/javascript">
- <script type="text/javascript" defer="defer">
- <h1>测试博客</h1><script type="text/javascript">alert(456);</script>
- "<script type="text/javascript">"window.location.href='http://baidu.com'".replace(/.+/,eval)</script>"
- <script type ="text/javascript(这有一个空格) ">
- <script type="text/javascript" src="<%=path %>/pages/js/arsis/area.js?v=1.01"></script> 为什么在最后加? v+1.01
- 杜绝<script src="js/tool.js" type="text/javascript"/>这样写的习惯
- <script type="text/javascript"></script>
- document.write('<script type=\"text/javascript\"><\/script>')
- [JavaScript] <script type="text/javascript"> </script> 和<script language="javascript"> </script>区别
- <script type="text/template">是干什么的,为什么要把html写在js中? 这是什么编程语言风格,都能这样用吗?
- <script type="text/javascript" src="">
- <h1>测试博客</h1><script type="text/javascript">alert(1);</script>
- <script type="text/javascript">
- sublime text中<script type="text/ecmascript-6">如何代码高亮并支持语法?