//创建新的html元素 -appendChild() 这个方法是添加到父元素的子元素列表最后
//1.创建一个标签元素
var testdiv = document.createElement('div');
//2.创建一个文本节点
var textNode = document.createTextNode('我是新添加的第一个文本节点');
testdiv.appendChild(textNode);
//3.注意新建的元素必须添加到已有元素上，才能添加成功
document.getElementById('testAppend').appendChild(testdiv);
//创建新的html元素 -insertBefore()这个方法是添加到指定子元素之前
//params1: 新创建需要操作的元素
//params2: 需要添加在哪个元素之前，该元素起到一个标记位的作用(该已知元素必须存在，否则会报错)
var testdiv2 = document.createElement('div');
var textNode2 = document.createTextNode('我要放在最前面');
testdiv2.appendChild(textNode2);
document.getElementById('testAppend').insertBefore(testdiv2, testdiv1);
//移除已存在的元素
//语法: 父元素.removeChild(子元素)
var parent = document.getElementById('testAppend');
parent.removeChild(testdiv2);
//替换已存在元素
//语法:parent.replaceChild(替换后的节点，需要被替换的节点) 和insertChild一样，第二个参数都是起到标志位的作用
var testdiv5 = document.createElement('div');
var testNode5 = document.createTextNode('我是来替换第二个文本节点的');
testdiv5.appendChild(testNode5);
document.getElementById('testAppend').appendChild(testNode5);
document.getElementById('testAppend').replaceChild(testdiv5,testdiv1);
//同一个父元素下子元素的关系
var childNodes = document.getElementById('testAppend').childNodes;
console.log('childNodes:',childNodes);
var lastChild = document.getElementById('testAppend').lastChild;//该节点最后一个子节点
var firstChild = document.getElementById('testAppend').firstChild;//该节点第一个子节点
var middleNode = childNodes[1];
var previousNode = middleNode.previousSibling;//该子节点上一个子节点
var nextNode = middleNode.nextSibling;//该子节点下一个子节点
console.log('firstNode:',firstChild,'lastChild:',lastChild,'previousNode:',previousNode,'nextNode:',nextNode);
//节点复制
//cloneNode(boolean a);
//深拷贝，复制节点本身和所有子节点
var deepList = document.getElementById('testAppend').cloneNode(true);
console.log('length',deepList.childNodes.length);// 3
//浅拷贝，仅复制节点本身
var shallowList = document.getElementById('testAppend').cloneNode(false);
console.log('shallow length',shallowList.childNodes.length);//0
