JS 模板引擎

模板引擎

数据未绑定数据绑定后

<!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>