js终端添加代码(怎么添加js代码)
更新:2022-11-11 17:49
本文目录一览:
如何优雅的用js动态添加html代码
一、使用javascript 模板引擎
用javascript预编译模版,就是动态修改模板文件使之成为一个可用的静态HTML文件。我平时会使用artTemplate,性能很好而且易上手。
编写模板
使用一个type="text/html"
的script标签存放模板:
<script id="test" type="text/html">
<h1>{{title}}</h1>
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} :{{value}}</li>
{{/each}}
</ul>
</script>
渲染模板
var data = {
title: '标签',
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
二、使用CoffeeScript
CoffeeScript支持类似于Python的跨行字符串,这样很轻易的就能保持HTML结构的可读性,而不需要使用“+”或者采用拼数组的形式。
str="""
<div class="dialog">
<div class="title">
<img src="close.gif" alt="关闭" />关闭
</div>
<div class="content">
<img src="delete.jpg" alt="" />
</div>
<div class="bottom">
<input id="Button2" type="button" value="确定" class="btn"/>
<input id="Button3" type="button" value="取消" class="btn"/>
</div>
</div>
"""
js里面添加php代码
你本意是要在js中读取php输出的值对吗? 你可以先把php输出的值放到一个div里面,再在js中获取div的值就可以了。 建议用jQuery:
<html>
<head>
<title></title>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script>
$(function(){
var tit = $("#tt").attr("title");
var txt = $("#tt").text();
alert(tit+"-=---"+txt);
})
</script>
</head>
<body>
<div id="tt" name="tt" title="<?php echo "cccccssfa"; ?>"><?php echo "fsadfsd"; ?></div>
</body>
</html>
JS如何在页面中插入HTML代码
在JS中插入短的HTML代码,可以通过先使用一个函数来包着你要添加的HTML代码,然后使用innerHTML
提取即可。在你的HTML中添加一个事件,然后调用这个函数:
<html>
<head>
<script>
function insert(){
var insertText = "<table><tr><td>anything</td></tr></table>";
document.getElementById("insert").innerHTML = insertText;
}
</script>
</head>
<body>
<button onclick="insert()">Insert</button>
<div id="insert"></div>
</body>
</html>