js之动态添加dom结点

最近在照着慕课网上的视频教程做一些有关css3的小动画，发现css3着实强大，给js编写减轻了很多负担，以前一丢丢的小特效就写一段又一段的js代码，现在学习了css3之后，几行css代码轻松搞定，当然浏览器的兼容性这个问题把，呵呵呵呵呵。。。。。只能说我的愿望是世界和平。我的愿望是所有的浏览器用户将IE能升级到至少8，最好10，11。。。

这两天在慕课学习了带预览图的幻灯片课程，发现了js添加结点的一个新大陆。。

大致思路如下：

1、在html中写一段模版代码，用以在js中复制添加

<div class="slider">
    <!--幻灯片模版-->
    <div class="main" id="template_main">
        <div class="main-i {{css}}" id="main_{{index}}">
            <div class="caption">
                <h2>{{h2}}</h2>
                <h3>{{h3}}</h3>
            </div>
            <img src="images/{{index}}.jpg" alt="" class="picture"/>
        </div>
    </div>

    <div class="ctrl" id="template_ctrl">
        <a href="javascript:switchSlider({{index}});" class="ctrl-i" id="ctrl_{{index}}">
            <img src="images/{{index}}.jpg" alt=""/>
        </a>
    </div>
</div>

2、创建要添加的dom数据

var data=[
    {img:1,h2:"Creative",h3:"DUET"},
    {img:2,h2:"Friendly",h3:"DEVIL"},
    {img:3,h2:"Tranquilent",h3:"COMPATRIOT"},
    {img:4,h2:"Insecure",h3:"HUSSLER"},
    {img:5,h2:"Loving",h3:"REBEL"},
    {img:6,h2:"Passionate",h3:"SEEKER"},
    {img:7,h2:"Crazy",h3:"FRIEND"}
];

3、js获取模版代码段

var tpl_main=document.getElementById('template_main').innerHTML
            .replace(/^\s*/,'')         //清除头尾的空白符
            .replace(/\s*$/,'');
var tpl_ctrl=document.getElementById('template_ctrl').innerHTML
            .replace(/^\s*/,'')         //清除头尾的空白符
            .replace(/\s*$/,'');

4、创建空数组，遍历数据data，将添加的数据添加到dom结点中，push进空数组

var out_main=[];
var out_ctrl=[];

for(var i in data){
    var _html_main=tpl_main
            .replace(/{{index}}/g, data[i].img)
            .replace(/{{h2}}/g, data[i].h2)
            .replace(/{{h3}}/g, data[i].h3)
            .replace(/{{css}}/g,['','main-i_right'][i%2]);
    var _html_ctrl=tpl_ctrl
            .replace(/{{index}}/g,data[i].img);
    out_main.push(_html_main);
    out_ctrl.push(_html_ctrl);
}

5、将数组利用join()方法转成字符串，再将这段html写回到对应的dom中

g('template_main').innerHTML=out_main.join('');
g('template_ctrl').innerHTML=out_ctrl.join('');