JavaScript DOM appendChild添加子元素

最新推荐文章于 2022-03-11 14:28:30 发布

编程界小明哥

最新推荐文章于 2022-03-11 14:28:30 发布

阅读量7.3k

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/dkm123456/article/details/111277044

版权

javascript 专栏收录该内容

78 篇文章 26 订阅

订阅专栏

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>

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

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>

效果：

编程界小明哥

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript DOM appendChild添加子元素

目录1.在末尾添加元素：2.移动元素至末尾或至另一个元素的末尾：1.在末尾添加元素，实例： <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> </head> <body> <div id="box"
复制链接

扫一扫