js操作dom增删替换

追加 

let chatbox = document.getElementById('chatbox')

let p = document.createElement('div')

 p.className = 'tips'

let res =

            '——已切换为' +

            this.newValue

             +

            '——'

 p.innerHTML = res

chatbox.appendChild(p)

删除

完全删除 

var box=document.getElementById("box");

box.remove(); 

chatbox.innerHTML = '';

 有返回值，其返回值未被完全删除还能进行其他操作（如插入操作）

var oldnode = document.getElementsByTagName('p')[0];

oldnode.parentNode.removeChild(oldnode);

 替换

parentNode.replaceChild()

var pnode = document.createElement('p');

var tnode = document.createTextNode('故人西辞黄鹤楼');

pnode.appendChild(tnode);

var oldnode = document.getElementsByTagName('p')[0];

oldnode.parentNode.replaceChild(pnode,oldnode)

createElement（）    创建dom元素
querySelectorAll（）    获取dom元素
querySelector（）    获取满足条件的元素集合中的第一个元素
append()    将参数做为父元素的最后一个子元素追加到列表中,无返回值
prepend()    将参数做为父元素的头部追加
replaceWith()    当前节点替换方法
remove()    删除节点，在被删除的节点上直接调用
insertAdjacentElement()    (‘插入位置’, 元素)
afterBegin    开始标签之后,第一个子元素
beforeBegin    开始标签之前,是它的前一个兄弟元素
afterEnd    结束标签之后,它的下一个兄弟元素
beforeEnd    结束标签之前,它的最后一个子元素

parentNode 和 parentElement 都是获取父标签

children 返回 子标签 集合
childNodes 返回 子节点 集合

firstChild :返回第一个 子节点
firstElementChild :返回第一个 子标签

lastChild 返回最后一个 子节点
lastElementChild 返回最后一个 子标签

nextSibling 获取下一个 兄弟节点
nextElementSibling 获取下一个 兄弟元素

previousSibling 返回上一个 兄弟节点
previousElementSibling 返回上一个 兄弟元素