提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  工具

当前栏目

2015.7.15js-12(DOM的操作应用)

应用 操作 12 dom
2023-09-14 08:58:51 时间

1.创建新标签：document.createElement(标签名)

var oLi = document.createElement("li");

2.创建新文本：document.createTextNode(文本)

var oTxt = document.createTextNode("hello world");

3.添加到元素后面：父级.appendChild(新创建子节点)

var oUl = document.getElementById("nav");
oLi.appendChild(oText);        //新创建文件添加到新建标签中
oUl.appendChild(oUl);           //添加到ul元素中

4.添加到元素前面：父级.insertBefore(子节点，在谁的前面);

oBtn.onclick = function(){
    var oUl = document.getElementById("nav");
    var oLi = document.createElement("li");    //创建li标签
    var oTxt = document.createTextNode("hello world");    //创建新文本
    var newText = oLi.appendChild(oText);    
    var aLi = oUl.getElementsByTagName("li");    //循环li

    if(aLi.length > 0){
        oUl.insertBefore(newText,aLi[0]);    //如果存在子节点li
    }else{
        oUl.appendChild(newText);
    }    
}

5.删除子节点：父级.removeChild(子节点);

<ul id="nav">
        <li>能删除整个li<a href="javascript:;">删除</a></li>
</ul>

for(var i = 0,len = arrA.length; i < len; i++){
        arrA[i].onclick = function(){
            oUl.removeChild(this.parentNode); //父级.removeChild(子节点)
        }
    }

 

相关文章