js给dom添加属性_vue动态添加dom元素[通俗易懂]

编程小号 • 2024-04-15 15:06 • 未分类

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>

效果：