最近在对之前理解的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就可以解决这个问题。