动态添加DOM 节点

最近比较累,直接上干货.

方法: append, prepend,appendTo,prependTo.

方法都是jQuery的.  注意他们都可以传function参数.

举个栗子:

$("p").append(function(n){
      return "<b>This p element has index " + n + "</b>";
    });

如果要循环动态添加多个.

第一种方法:

可以先写个字符串模板.

var notebookTemplate = 
    '<li class="online">'+
    '<a>'+
    '<i class="fa fa-book" title="online" rel="tooltip-bottom">'+
    '</i> [name]</a></li>';

然后for循环的时候,用replace()方法替换成动态值.

for(var i=0;i<list.length;i++){
                var notebook = list[i];
                var li = notebookTemplate.replace("[name]",notebook.name);
                ul.append(li);
            }

如果有多个需要动态替换的值,可以替换多次.

第二种方法:函数

//把动态html ,return出去.
    var tempTr = function (value,name,nodeStr) {
        var nodeCheckbox = '';
        var nodeArr = nodeStr.split(',');
        var len = nodeArr.length;
        for (var j=0; j<len; j++) {
            var v_name = nodeArr[j].split('-');
            if ('开始' !== v_name[1] && '结束' !== v_name[1]) {    
                var nodeInput = '<input type=checkbox value='+ v_name[0] +' name=node>' + v_name[1];                 
                nodeCheckbox += nodeInput;
            }
        }

        return      '<TR>' 
                +    '<TD>' 
                +       '<INPUT type=checkbox value=' + value
                +                ' name=wfl οnclick=WflClick(this)>' + name
                +        '<span class=' + value +' style="{display:none; margin-left:20px}">'
                +        nodeCheckbox 
                +        '</span>'
                +    '</TD>'
                +'</TR>';
    }

//for 循环中动态添加.

for(var i = 0; i< len; i++){
                var json = jsonArray[i]; 
                for (var key in json) { 
                    var arrKey = key.split('-');
                    trs += tempTr(arrKey[0],arrKey[1],json[key]);
                } 
            }

两种方法看自己喜欢.

当然jsp,forEach也可以.

但现在用jsp已经很少了.

性能低,不好维护.

 

-------工作中记录和总结.