js-appendChild的用法

1.先把元素从原有的父级上删除
2.添加到新的父级上

<!DOCTYPE html>
<html>
<head>
	<title>appendChild 高级运用</title>
</head>
<script type="text/javascript">
	window.onload=function(){
    var Btn = document.getElementById('btn');
	 var oul1 = document.getElementById('ul1');
	 var oul2 =document.getElementById('ul2');
	 Btn.onclick=function(){
     oul2.appendChild(oul1.children[0]);
	 };
	};
</script>
<body>
<style type="text/css">
	#ul1{
		background: red;
	}
	#ul2{
		background: green;
	}

</style>

<ul id="ul1">
	
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>

</ul>
<input type="button" id="btn" value="提交"></button>
<ul id="ul2">
	
</ul>
</body>
</html>

在这里插入图片描述

发布了62 篇原创文章 · 获赞 102 · 访问量 3152

猜你喜欢

转载自blog.csdn.net/weixin_44763595/article/details/104835327