父节点对象调用
1.appendChild()追加节点
//1.获取到父节点
//2.找到孩子
//3.添加
var parent=document.getElementsByClassName('parent')[0];
var newChild=document.createElement('div');
//添加内部文本
// newChild.innerText='four';
/添加内部内容 innerHTML可以设别HTML代码片段 可以识别标签
newChild.innerHTML=`<div class='child'>newChild</div>`
parent.appendChild(newChild);
console.log(parent)
2.insertBefore()在参照节点前插入节点 第一个参数要插入的节点 第二个参数参照节点
同一个节点在页面中只存在一个
var two=parent.children[1];
parent.appendChild(two)
parent.insertBefore(newChild,two);
3.replaceChild()替换节点 第一个参数:要插入的节点;第二个参数:要替换的节点;第二个节点被删除
parent.replaceChild(newChild,two)
4.removeChild()一个参数 要移除的节点
parent.removeChild(two)
任意元素调用
parent.innerHTML;设别HTML代码片段
parent.innerText;;只识别文本 去除空格和回车
parent.textContent;只识别文本,不去除空格和回车
6.清空节点内部内容
parent.innerHTML=""
7.cloneNode();复制节点 有参数true代表深复制
//浅复制 只复制节点 不复制内容
var cloneTwo=two.cloneNode();
parent.appendChild(cloneTwo);
// 深复制 复制节点和内容
var cloneTwo=two.cloneNode(true);
parent.appendChild(cloneTwo);