动态添加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 onclick=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已经很少了.

性能低,不好维护.

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

猜你喜欢