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)方法替换节点处的元素

上一篇:js入门之DOM动态创建数据


下一篇:基础语法-循环结构while