学习笔记——day32

最新推荐文章于 2022-06-29 23:19:19 发布

陈肉肉

最新推荐文章于 2022-06-29 23:19:19 发布

阅读量131

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/Katherine_c/article/details/99933640

版权

学习笔记专栏收录该内容

31 篇文章 0 订阅

订阅专栏

一.克隆及替换

<body>
		<div class="container">
			<p id="p">ppp</p>
		</div>
		
		<script>
			var p = document.getElementById("p");
			var container = document.getElementsByClassName("container")[0];
			//克隆,true:深克隆
			var p_clone = p.cloneNode(true);
			console.log(p_clone);
			container.appendChild(p_clone);
			
			//替换克隆元素为div内容为我是div
			var div = document.createElement("div");
			div.innerText="我是div";
			
			container.replaceChild(div,p_clone);
			
			//删除div
			div.parentNode.removeChild(div);
			
		</script>
	</body>

二.左右移动

<body>
		<table border="" cellspacing="" cellpadding="">
			
			<tr>
				<td>
					<select id="left" multiple="multiple">
						
						
						<option value ="">增</option>
						<option value ="">删</option>
						<option value ="">改</option>
						<option value ="">查</option>
						
					</select>
				</td>
				
				<td>
					<button type="button" onclick="add()">&gt;&gt;</button><br />
					<button  type="button" onclick="addAll()">&gt;&gt;&gt;</button><br />
					<button  type="button" onclick="remove()">&lt;&lt;</button><br />
					<button  type="button" onclick="removeAll()">&lt;&lt;&lt;</button><br />
				</td>
				<td>
					<select name="" id="right"  multiple="multiple">
					</select>
				</td>
				</tr>
		</table>
		
		<script>
			var left = document.getElementById("left");
			var right = document.getElementById("right");
			function add(){
				var ops = left.selectedOptions;
				console.log(ops);
				for (var i=ops.length-1;i>=0;i--) {
					right.appendChild(ops[i]);
				}
			};
			
			function addAll(){
				//左侧所有option-->右侧
				var ops =left.options;
				for(var i = ops.length-1;i>=0;i--){
					right.appendChild(ops[i]);
				}
			};
			
			function remove(){
				var ops = right.selectedOptions;
				for(var i=ops.length-1;i>=0;i--){
					left.appendChild(ops[i]);
				}
			};
			
			function removeAll(){
				//右侧所有option-->左侧
				var ops = right.options;
				for(var i= ops.length-1;i>=0;i--){
					left.appendChild(ops[i]);
				}
				
			};
		</script>
	</body>

三.nodetype

<body>
		 <div id="div">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
        <script>
        	var div = document.getElementById("div");
        	var cs = div.childNodes;
			for (var i=0;i<cs.length;i++) {
				console.log(cs[i].nodeName+"--"+cs[i].nodeValue+"--"+cs[i].nodeType);
			}        	
        	
        </script>
	</body>

陈肉肉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习笔记——day32

一.克隆及替换<body> <div class="container"> <p id="p">ppp</p> </div> <script> var p = document.getElementById("p"); var container = document.getElement...
复制链接

扫一扫