选择一个元素或元素列表

按给定 ID 选择元素

<div id="hello" />;

document.getElementById('hello');

按类名选择元素

el.getElementsByClassName('hello');

按标签名称选择元素

el.getElementsByTagName('span');

通过 CSS 选择器选择元素

// nodelist
ele.querySelectorAll('div.hello');
// 第一个
ele.querySelector('div.hello');

在refEl元素之后插入el元素

refEl.parentNode.insertBefore(el, refEl.nextSibling);
// 或者
refEl.insertAdjacentElement('afterend', el);

在refEl元素之前插入el元素

refEl.parentNode.insertBefore(el, refEl);
// 或者
refEl.insertAdjacentElement('beforebegin', el);

给定的元素之后插入html

el.insertAdjacentHTML('afterend', html);

给定的元素之前插入html

el.insertAdjacentHTML('beforebegin', html);

讲元素添加道目标元素的开头

target.insertBefore(el, target.firstChild);

删除节点的所有子节点

el.innerHTML = '';
// 或者
while (node.firstChild) {
    node.removeChild(node.firstChild);
}

删除一个元素

el.remove();
// 或者
if (el.parentNode) {
    el.parentNode.removeChild(ele);
}

替换元素

// 用newEl替换el
el.parentNode.replaceChild(newEl, el);

每天一个javascript操作dom方法，学到了，点个赞吧