本文目录一览：
如何优雅的用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
原创文章，作者：简单一点，如若转载，请注明出处：https://www.506064.com/n/130016.html
微信扫一扫 
支付宝扫一扫 