JavaScript获取和创建元素

1、JavaScript中获取元素

常用的获取document中元素的方法：

　　1) document.getElementById() =》通过元素ID获取文档中特定的元素，如获取 id = "button1" 的按钮 可以写成： var btn = document.getElementById("button1");

　　2) document.getElementByTagName() =>获取特定标签的元素集合（返回为 NodeList 结果），因为一个document中可能会有多个该tag的元素。

　　　　如： var divs = documet.getElementByTagName("div"); 获取文档中所有的div;

　　　　divs.length 获取元素个数，divs[0]取得第一个元素

2、动态创建元素并添加到页面中

　1）//创建一块文本，并添追加到文档的最末尾

　　function addText(){

　　var text = document.getElementById("txtarea").value;

　　var newText = document.createTextNode(text);

　　var newPart = document.createElement("P");

　　newPart.appendChild(newText);

　　 var body = document.getElementsByTagName("body")[0];

　　 body.appendChild(newPart);

　　 return false;

　　}

2）//创建一个超链接，并指定url

function addLink() {

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

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

linkA.innerText = "GOTO...";

linkA.title = "goto another url";

var body = document.getElementsByTagName("body")[0];

body.appendChild(linkA);

alert("添加成功！");

}

3）创建一个按钮并指定单击事件

var btnCnt = 0;

function addNewBtn(){

btnCnt += 1;

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

btn.type = "button";

btn.value = "new btn" + btnCnt;

btn.id = "btn" + btnCnt;

btn.onclick = newBtnClicked;

var div = document.getElementById("div1");

div.appendChild(btn);

alert("OK");

}

function newBtnClicked() {

alert("New button clicked here");

}

4）删除指定的按钮

function removeBtn(){

if(btnCnt == 0){

alert("No button to delete");

return;

}

var btn = document.getElementById("btn" + btnCnt);

if(btn != null){

document.getElementById("div1").removeChild(btn);

alert("removed");

btnCnt -= 1;

}

else{

alert("Not found btn" + btnCnt);

}

}

注：因为 btn 是在 div 中添加的，因此需要从DIV中删除，而不是直接从document中删除。

5）除了增加、删除外，还可以调用 节点.insertBefor(new,old)的方式在节点的old前面插入新元素；或节点.replace(new ,old)方法替换节点处的元素