您的位置:首页 > Web前端 > JavaScript

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

2016-06-24 16:29 871 查看
<div></div>

<script type="text/html" 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')

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: