本文目录一览:
如何优雅的用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
headtitle/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
=
"tabletrtdany
thing/td/tr/table";
document.getElementById("insert").innerHTML(insertText);
}
/script
/head
body
button
onclick="insert()"Insert/button
div
id="insert"/div
/body
/html