标签：appendChild console 操作方法 JS querySelector var fgx document 类名

<div id="box">
			
		</div>
		<button type="button" id="btn">appendChild剪切</button>
		<button type="button" id="btn2">insertBefore剪切</button>
		<button type="button" id="btn3">replaceChild剪切</button>
		<div id="newchild">
			这是已经存在的,将我插入到div#id中后,我将被删除.如同剪切
		</div>
		<div id="replaceChildId">
			一会我就会被replaceChild()替换掉
		</div>
		<button type="button" id="btn4">removeChild删除</button>
		<button type="button" id="btn5">remove删除</button>
		<div id="removeChildId">
			我是要被removeChild()删除的
		</div>
		<div id="cloneNodeId" onclick="alert(this.nodeName);" style="padding: 20px;border: 1px solid blue;">
			我是用来判定是深复制还是浅复制
			<button type="button" id="btn6">复制</button>
		</div>
		<div id="cloneDiv1">
		</div>
		<div id="cloneDiv2">
		</div>
		<script>
			
			console.group("1.标签节点操作方法");
				(function(){
					var box=document.querySelector("#box");
					fgx("1.document.creatElement():");
					var ceDiv=document.createElement("div");//通过指定名称创建一个元素
					console.log("ceDiv:",ceDiv);
					var ceDiv2=document.createElement("div2");//通过指定名称创建一个元素
					console.log("ceDiv2:",ceDiv2);
					
					fgx("2.document.creatTextNode():");
					var ctText=document.createTextNode("通过js创建的文本节点");//创建文本节点
					console.log("ctText:",ctText);
					
					fgx("3.element.appendChild():");
					ceDiv.appendChild(ctText);//可向节点的子节点列表的末尾添加新的子节点。
					console.log("ceDiv:",ceDiv);
					box.appendChild(ceDiv);//可向节点的子节点列表的末尾添加新的子节点。
					console.log("box:",box);
					
					fgx("appendChild剪切");
					var btn=document.querySelector("#btn");
					btn.onclick=function(){
						var newchild=document.querySelector("#newchild");
						console.log("newchild:",newchild);
						box.appendChild(newchild);
					}
					
					fgx("4.element.insertBefore(newnode,existingnode):");
					var ceP=document.createElement("p");
					ceP.append("通过append可以直接添加string,但有兼容性问题","2");//存在兼容性问题//存在兼容性问题
					var br=document.createElement("br");
					ceP.appendChild(br);
					var ctText2=document.createTextNode("通过createTextNode创建");
					ceP.appendChild(ctText2);
					var boxDiv=document.querySelector("#box>div:nth-child(1)");
					box.insertBefore(ceP,boxDiv);//方法可在已有的子节点前插入一个新的子节点
					
					fgx("insertBefore剪切");
					var btn2=document.querySelector("#btn2");
					btn2.onclick=function(){
						box.insertBefore(newchild,boxDiv);
					}
					
					fgx("5.element.replaceChild(newnode,oldnode):");
						var t=setTimeout(function(){
							var replaceChildId=document.querySelector("#replaceChildId");
							var repDiv=document.createElement("div");
							var repText=document.createTextNode("repacleChild替换原来内容");
							repDiv.appendChild(repText)
							var body=document.querySelector("body");
							body.replaceChild(repDiv,replaceChildId);//body是replaceChildId的父节点.
						},3000);
					fgx("replaceChild剪切");
					var btn3=document.querySelector("#btn3");
					btn3.onclick=function(){
						box.replaceChild(newchild,boxDiv);
					}
					
					fgx("6.element.removeChild(node):");
					var btn4=document.querySelector("#btn4");
					var btn5=document.querySelector("#btn5");
					var removeChildId=document.querySelector("#removeChildId");
					btn4.onclick=function(){
						removeChildId.parentNode.removeChild(removeChildId);//通过父元素移除自己
					}
					fgx("7.remove()");
					btn5.onclick=function(){
						removeChildId.remove();//可以移除自己
						this.remove();//可以移除自己
					}
				}());
			console.groupEnd();
			
			console.group("2.DOM.cloneNode(boolean)");
				(function(){
					var dom=document.querySelector("#cloneNodeId");
					var domDiv1=document.querySelector("#cloneDiv1");
					var domDiv2=document.querySelector("#cloneDiv2");
					var newDom1=dom.cloneNode(true);
					var newDom2=dom.cloneNode(false);//默认是false
					console.log("newDom1:",newDom1);
					console.log("newDom2:",newDom2);
					domDiv1.appendChild(newDom1);
					domDiv2.appendChild(newDom2);
					
					var btn6=document.querySelector("#btn6");
					btn6.onclick=function(){
						alert(this.nodeName);
					}
					
				}());
			console.groupEnd();
			
			function fgx(str){
				if(str==undefined){
					str="";
				}
				console.log(str+"------------------------");
			}
		
		</script>

标签：appendChild,console,操作方法,JS,querySelector,var,fgx,document,类名
来源： https://blog.csdn.net/weixin_59519449/article/details/120638303

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。