给动态生成的id标签添加html,比较好玩的动态添加网页元素

比较好玩的动态添加网页元素

javascript 有一些很有趣的功能。下面介绍三样小功能。

1.动态创建按键

2动态创建链接

3动态创建表格

效果如下：

源代码如下：

function btnClick() {

var divMain = document.getElementById('divMain');

var input = document.createElement("input");

input.type = "button";

input.value = "我是动态按钮";

divMain.appendChild(input);

}

function linkCreate() {

var divlink = document.getElementById("divlink");

var link = document.createElement("a");

link.href = "http://www.baidu.com";

link.innerText = "百度";

divlink.appendChild(link);

}

function tableCreate() { var data = { "google":"http://www.google.com","搜狐":"http://www.souhu.com","百度":"http://www.baidu.com" }

var tablediv = document.getElementById("tablediv");

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 = ""+value+"";

tr.appendChild(td2);

tablediv.appendChild(tr);

}

}

type="button" value="动态创建链接" />

value="创建一个链接的表格" />

详细见附件：