模板引擎
数据未绑定
数据绑定后
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板引擎</title>
</head>
<body>
<script>
//template模板
var str = "我的名字叫：@name@，学号是：@xuehao@，是@banji@的学生。";
//替换的字典/数据
var dictionary = {
"name" : "小明",
"xuehao" : 12345,
"banji" : "三班"
}
//数据绑定函数
function compile(template,dic){
return template.replace(/\@([a-z]+)\@/gi,function(match,$1,index,str){
return dic[$1];
});
}
//调用数据绑定函数
var str = compile(str,dictionary);
//输出结果
alert(str);
</script>
</body>
</html>
append()了解
append() 方法在被选元素的结尾插入指定内容。
模板： $(selector).append(content);
| 参数 | 描述 |
|---|---|
| content | 指定被插入的内容，content的可能的值:1.HTML 代码 - 比如 ("<div></div>")。2.已存在的元素 - 比如 ($("div"))。3.function(index)函数 - 定义返回插入元素的函数，index参数接收选择器的索引位置。 |
| selector | 要被插入内容的匹配元素 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>append</title>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
function appendText(){
var txt1="<p>文本。</p>"; // 使用 HTML 标签创建文本
var txt2=$("<p></p>").text("文本。"); // 使用 jQuery 创建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM
$("body").append(txt1,txt2,txt3); // 追加新元素
}
</script>
</head>
<body>
<p>这是一个段落。</p>
<button onclick="appendText();">追加文本</button>
</body>
</html>
网友评论