追加
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 返回上一个 兄弟元素