使用JavaScript控制html中节点的增删改

本文为博主原创，更多好文章请点击这里

题记：今天研究了下js下面的利用DOM属性，对html标签中的元素节点进行增删改的操作，在这里跟大家简单的分享下，废话不多说，直接上代码

1. 首先是Html部分,你可以直接复制代码写在里边

<div id="box1" style="border:1px solid red;">
    <input type="button" id="btnAdd" value="新增.Net" onclick="addNode()"/>
    <input type="button" id="btnMove" value="移动.Net" onclick="moveNode()"/>
    <input type="button" id="btnDel" value="删除.Net" onclick="delNode()"/>
    <input type="button" id="btnReplace" value="替换.Net" onclick="replaceNode()"/>
</div>
<div id="box2"><div>
<ul>
    <li>PHP</li>
    <li>JAVA</li>
    <li>C#</li>
</ul>

1. 然后是利用js去一个一个对接方法

   • 1. 第一个是克隆

function copyDiv(){
    //要克隆的对象
    var div1 = document.getElementById("box1");
    //把克隆信息存储下来
    var newDiv = div1.cloneNode(true);
    //找到一个可以放置克隆信息的载体
    var div2 = document.getElementById("box2");
    //追加信息到载体中去
    div2.appendChild(newDiv);
}

• 1. 添加节点

function addNode(){
    //找到父节点
    var oUl = document.getElementsByTagName("ul")[0];
    //创造一个新的子节点
    var newNode = document.createElement("li");
    //添加子节点内容
    newNode.innerHTML = ".NET";
    //追加子节点到父节点当中去
    oUl.appendChild(newNode);
}

• 1. 删除节点

function delNode(){
    //1.找父节点
    var oUl = document.getElementsByTagName("ul")[0];
    //2.找子节点
    // var c = oUl.getElementsByTagName("li")[3];
    var lastNode = oUl.lastElementChild || oUl.lastChild;
    //3.从父节点中移除子节点
    oUl.removeChild(lastNode);
}

• 1. 修改/替换节点

function replaceNode(){
    //1.找到父节点
    var oUl = document.getElementsByTagName("ul")[0];
    //2.找到要被替换的目标对象
    var php = oUl.getElementsByTagName("li")[0];
    //3.创造新的替换对象
    var newNode = document.createElement("li");
    newNode.innerHTML = ".NET";
    //4.执行 父节点.replaceChild(新对象，被替换的对象)
    oUl.replaceChild(newNode,php);
}

• 1. 移动节点

function moveNode(){
    //1.获取父元素节点
    var oUl = document.getElementsByTagName("ul")[0];
    //2.找到目标替换元素节点
    var firstNode = oUl.getElementsByTagName("li")[0];
    //3.找到第二个目标替换元素节点
    var lastNode = oUl.lastElementChild;
    //4.更换位置，父节点.insertBefore(目标节点2,目标节点1)
    oUl.insertBefore(lastNode,firstNode);//父元素节点.插入方法(要插入的节点，已有的节点)
}

好了接下去自己运行开下效果吧！

本文为博主原创，更多好文章请点击这里