DOM常用方法之插入，删除，添加等。

灰太狼 2022-06-07 05:24 116阅读 0赞

DOM相信大家都见得多，这里介绍常见的操作。

0、createElement();创建

1、appendChild();追加节点

2、removeChild();删除

3、insertBefore(节点, 原有节点)在已有元素前插入

createElement();创建：

appendChild();追加节点

用法：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<meta http-equiv="X-UA-Compatible" content="ie=edge">
    	<title>Document</title>
    </head>
    <body>
    		<script type="text/javascript">
    			window.οnlοad=function ()
    			{
    				var oBtn=document.getElementById('btn1');
    				var oTxt=document.getElementById('txt1');
    				var oUl=document.getElementById('ul1');
    				
    				oBtn.οnclick=function ()
    				{
    					var oLi=document.createElement('li');
    					
    					oLi.innerHTML=oTxt.value;
    					
    					//父.appendChild(子节点)
    					oUl.appendChild(oLi);
    				}
    			}
    			</script>
    			<input id="txt1" type="text" />
    			<input id="btn1" type="button" value="创建Li"/>
    			<ul id="ul1">
    				<li>aaa</li>
    			</ul>
    </body>
    </html>

removeChild();删除

用法：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <script>
            window.onload = function(){
                var oul = document.getElementById("ul1");
                var oa = document.getElementsByTagName("a");
                for( var i = 0; i< oa.length; i++){
                    oa[i].onclick = function(){
                        oul.removeChild(this.parentNode);
                    }
                }
            };
        </script>
        <ul id="ul1">
            <li>啊啊<a href="javascript:;">删除</a></li>
            <li>啊啊啊啊<a href="javascript:;">删除</a></li>
            <li>啊啊啊啊<a href="javascript:;">删除</a></li>
            <li>啊啊啊啊<a href="javascript:;">删除</a></li>
            <li>啊啊啊啊<a href="javascript:;">删除</a></li>
        </ul>
    </body>
    </html>

insertBefore(节点, 原有节点)在已有元素前插入

用法：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style>
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
    //父.insertBefore(子节点, 谁之前)
    
    window.οnlοad=function ()
    {
    	var oBtn=document.getElementById('btn1');
    	var oTxt=document.getElementById('txt1');
    	var oUl=document.getElementById('ul1');
    	
    	oBtn.οnclick=function ()
    	{
    		var oLi=document.createElement('li');
    		var aLi=oUl.getElementsByTagName('li');
    		
    		oLi.innerHTML=oTxt.value;
    		
    		if(aLi.length==0)
    		{
    			oUl.appendChild(oLi);
    		}
    		else
    		{
    			//更改原来没有的li元素
    			oUl.insertBefore(oLi, aLi[0]);
    		}
    	}
    }
    </script>
    </head>
    
    <body>
    <input id="txt1" type="text" />
    <input id="btn1" type="button" value="创建Li"/>
    <ul id="ul1">
    </ul>
    </body>
    </html>