DOM的增删改查

本文链接： https://blog.csdn.net/javascript_meng/article/details/100048911

DOM如何通过JS操作HTML （即增删改查）

1）查（一般通过属性和getElementById）
2) 增：
createElement(tagName) 创建元素节点对象
createTextNode() 创建文本节点
appendChild() 以子节点的形式追加到指定节点中
insertBefore(newNode,oldNode) 在oldNode前插入newNode

下面我们用例子实际应用一下

例 (1)创建div节点对象

var oDiv=document.createElement('div');
oDiv.innerHTML='新来的';
// console.log(oDiv);
//将创建的div追加到body种
document.body.appendChild(oDiv);

例（2）创建段落标记

 var op=document.createElement('p');
 op.innerHTML='我是段落';
console.log(op);
document.body.appendChild(op);

例（3）在div中插入span

 var os=document.createElement('span');
 os.innerHTML='我是span';
 oDiv.appendChild(os);

例（4）在超链接前插入段落标记
假如在body里有一个div，div里有一个超链接a

    var aLink=document.links[0];
    // console.log(aLink)
    //创建段落标记
    var op=document.createElement('p');
    op.innerHTML='段落';
    // o.insertBefore(aLink,op);
    o.insertBefore(op,aLink);

3）替换：replaceChild() 新节点替换旧节点

例：

<div id="box">hello</div>
<p id="p0">你好</p>

   var op=document.getElementById('p0');
    var o=document.getElementById('box');
    //创建新节点
    var oDiv=document.createElement('div');
    oDiv.innerHTML='你很好';
    //替换
    document.body.replaceChild(oDiv,op);
    //创建段落标记
    var newP=document.createElement('p');
    newP.innerHTML='新的段落';
    document.body.replaceChild(newP,o);

4）删除节点：removeChild()
(点击删除节点：在点击事件内部，this指被点击的元素)

例：

<ul id="list">
        <li>1<a href="javascript:void(0)">删除</a></li>
        <li>2<a href="javascript:void(0)">删除</a></li>
        <li>3<a href="javascript:void(0)">删除</a></li>
        <li>4<a href="javascript:void(0)">删除</a></li>
    </ul>

 <script>
        var oUl=document.getElementById('list');
        var len=document.links.length;
        for(var i=0;i<len;i++){
            document.links[i].onclick=function(){
                this.parentNode.parentNode.removeChild(this.parentNode);
            }
        }
    </script>

猜你喜欢