JavaScript DOM appendChild添加子元素

悠悠 2021-07-25 00:43 471阅读 0赞

**目录**

1.在末尾添加元素：

2.移动元素至末尾或至另一个元素的末尾：

--------------------

### 1.在末尾添加元素，实例： ###

<!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=GBK">
            </head>
            <body>
            	<div id="box">
            		<p>这是P元素1<p>
            		<p>这是P元素2<p>
            	</div>
            	
            	<button onclick='add()'>添加元素</button>
            </body>
    <script>
    	var i=3;
    	function add(){
    		var box = document.getElementById("box");
    		var p = document.createElement("p");
    			p.innerText='这是新的P元素'+(i++);
    			
    			box.appendChild(p);
       }
    </script>
    </html>

效果（点击按钮会增加新元素）：

![20201216151034531.png][]

### 2.移动元素至末尾或至另一个元素的末尾： ###

<!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=GBK">
            <style>
            *{
            	margin:0;
            	padding:0;
            }
            #box{
            	border:1px solid blue;
            	width:300px;
            	height:200px;
            }
            #box1{
            	position:absolute;
            	left:50%;
            	top:0;
            	border:1px solid blue;
            	width:300px;
            	height:200px;
            }
            </style>
            </head>
            <body>
            	<div id="box"></div>
            	
            	<button onclick='add()'>添加元素</button>
            	<button onclick='move()'>移动元素至末尾</button>
            	<button onclick='moveTo()'>移动元素至另一个元素末尾</button>
            	<div id="box1" >
            	</div>
            </body>
    <script>
    	var i=1;
    	function add(){
    		var box = document.getElementById("box");
    		var p = document.createElement("p");
    			p.innerText='这是新的P元素'+(i++);
    			
    			box.appendChild(p);
       }
       
       function move(){
       		var box = document.getElementById("box");
      		var newChild = box.firstChild;
      		if(newChild && newChild.nodeType){
      			box.appendChild(newChild);
      		}
       }
       function moveTo(){
       		var box = document.getElementById("box");
       	 	var box1 = document.getElementById("box1");
       	
       		var newChild = box.firstChild;
       		if(newChild && newChild.nodeType){
       			box1.appendChild(newChild);
       		}
       }
    </script>
    </html>

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70][]

[20201216151034531.png]: /images/20210724/5c518b8d99fa4f21a78dfe65bc1c4a8a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70]: /images/20210724/23571bb5d87a4583af28c924b346e65e.png