2015.3.7小练习（动态增加元素及表格，以及浏览器兼容问题）

标签：

      最近在对之前理解的HTML/CSS/javaScript查漏补缺，真是学会了Jquery马上就开始反感用javascript写很多jquery一下子就可以实现的选择和操作。

今天是做了一个根本无界面美观性可言的实验part，乱七八糟大乱炖，只为练习功能。

    动态增加元素

function addBtn() {
var textField = document.getElementById("main");
var input = document.createElement("input");
input.type = "button";
input.value = "我是动态的哟~";
textField.appendChild(input);
}
function creatA() {
var creatArea = document.getElementById("creatArea");
var a = document.createElement("a");
a.href = "http://www.baidu.com";
a.innerText = "百度一下，你就知道";
creatArea.appendChild(a);

}

动态创建表格，这里用到数组和JSON的概念；这里需要说明的是IE6，IE7是不支持table.appendChild("tr")指令的；在文章末尾会提到解决办法；

function createTable() {
   var data = { "淘宝": "http://www.taobao.com", "百度": "http://www.baidu.com", "新浪": "http://www.sina.com", "知乎": "http://www.zhihu.com" };
   var Area1 = document.getElementById("createArea");
   for (var key in data) {
       var value = data[key];
       var tr = document.createElement("tr");
       var td1 = document.createElement("td");
       td1.innerText = key;
       tr.appendChild(td1);

       var td2 = document.createElement("td");
       td2.innerHTML = "<a href=‘" + value + "‘>" + value + "</a>";
       tr.appendChild(td2);
       Area1.appendChild(tr);
}
}

针对浏览器不兼容的问题，增加表格行列可以使用如下代码：

var tr=Area.insertRow(-1);//这里的-1指的是最后一行；只有FireFox 中需要加（-1），IE 中则不需要。

var td=tr.insertCell(-1);

而产生这种不兼容性的原因是因为IE6，IE7默认的Table标签使用方法是表头下还有一个<Tbody></Tbody>

当我们直接执行上面的未调整的代码时，内容也被执行了添加操作，所以不会报错，但插入的地方却是和<Tbody></Tbody>标签平行，也就是在tbody的外面；

这也就导致了不能看到结果。

所以另外一种解决办法就是在写表格标签时添加<Tbody></Tbody>，并在函数的末尾动态增加元素时准确指向Tbody就可以解决这个问题。

2015.3.7小练习（动态增加元素及表格，以及浏览器兼容问题）

标签：

原文地址：http://www.cnblogs.com/shijia-dreamhome/p/4320874.html