js动态创建html（ie/mozilla）-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_10364/article/details/81954390

本文探讨了Internet Explorer浏览器在处理HTML表格元素时的兼容性问题，并提供了在IE中正确添加表格行的方法。同时介绍了如何使用JavaScript动态添加事件监听器，以实现更灵活的网页交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为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" class="lightbox" href="'+url+'" title="凭证">'+name+'</a>';  
		$("#fileName").html(defhtml);