读书人

js动态创造html(ie/mozilla)

发布时间: 2012-11-07 09:56:10 作者: rapoo

js动态创建html(ie/mozilla)
因为ie的兼容性问题(table节点下没法添加tr节点),原表格必须在table节点下有tbody节点,所有的tr节点都是在tbody节点之下。


var table = document.getElementById('affixtable'); var name = '删除';var tbody = document.createElement("Tbody");     var tr = document.createElement("tr");     tr.setAttribute('id',id);          var td = document.createElement("td");    td.setAttribute('colspan',3);            var img = document.createElement("img");         img.setAttribute('src','images/accessories.gif');              var span = document.createElement("span");       span.setAttribute('innerText',id);         var a = document.createElement("a");        a.setAttribute('href','javascript:del('+id+');');            a.setAttribute('innerText',name);        td.appendChild(img);    td.appendChild(span);    td.appendChild(a);    tr.appendChild(td);     tbody.appendChild(tr);        table.appendChild(tbody);  



两种方式:直接给对象添加事件,节点添加事件
例如给一个id为tab1的添加onclick事件
第一种情况:
var t = document.getElementById("tab1");t.onclick = function tst(){    alert('');}


第二种情况 这种情况更加动态,更为实用,而且还能添加多个函数(添加的事件的顺序即执行顺序)

   var tb = document.getElementById("tab1");    if(window.addEventListener){ // Mozilla, Netscape, Firefox        td_value.addEventListener('click', alert('11'), false);        td_value.addEventListener('click', alert('12'), false);    } else { // IE        td_value.attachEvent('onclick',  function(){alert('21');});        td_value.attachEvent('onclick',  function(){alert('2'2);});    }


快速动态添加:

var defhtml = '<a id="newName" href="'+url+'" title="凭证">'+name+'</a>';  $("#fileName").html(defhtml); 

读书人网 >CSS

热点推荐