<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>