We can define a code called by js in the <script> segment, but the code is not displayed on the page. In this case, we can use the following method:
Copy codeThe Code is as follows: <script id = "commentTemplate" type = "text/html">
<Li>
<Div class = "photo">
<A href = "#">
</a> </div>
<P>
<A href = "#"> [UserName]: </a> <span class = "time"> [CreateDate] </span> </p>
<Div class = "clear">
</Div>
</Li>
</Script>
Copy codeThe Code is as follows: <div id = "comment_ul_2">
</Div>
<Input type = "button" id = "addFun" value = "click me"/>
<Script type = "text/javascript">
Var reg = new RegExp ("\ [([^ \ [\] *?) \] ", 'Igm '); // I g m is used to specify case-sensitive matching, global matching, and Multiline matching.
$ ("# AddFun"). click (function (){
Var html = document. getElementById ("commentTemplate"). innerHTML;
Var source = html. replace (reg, function (node, key) {return {'userimg ': '1', 'username': 'zhang', 'createdate ': '2017-1-1 '} [key];});
$ ("# Comment_ul_2"). append (source );
});
Var zzl = "name: [name]";
Zzl = zzl. replace (reg, function (node, key) {return {'name': 'occupied '} [key];});
Alert (zzl );
</Script>
OK. This means that when you click the button, you can trace the content of commentTemplate to comment_ul_2. This is very interesting!
There is a replace, which is also very interesting. When you replace it, you can accept a json string, and then compare the keys in the js Module Based on the json key to assign values!
Really interesting!