今天我们讲一下如何用js进行元素的新增和删除操作。js新增元素一般可以用appendChild，beforebegin，afterbegin，beforeend，afterend等方法，每个方法的使用场景在下面代码的注释里有备注。

// 创建一个元素
var p_first = document.createElement("p");
p_first.id = "pid";
p_first.className = "pclassname";
p_first.setAttribute('name', 'pname');
p_first.innerText='我是一个 p 标签！';
//   父元素 elementobj，可能是一个 list，若为单一元素，则后续引用无需加 [0]
const elementobj = document.querySelectorAll(selector); 
// 在目标元素中插入
elementobj[0].appendChild(p_first);//直接添加在末尾
// 插入元素写法，入参有四种类型：
// beforebegin：目标元素的前面
// afterbegin：目标元素中，第一个子节点之前
// beforeend：目标元素中，最后一个子节点之后
// afterend：目标元素的后面
elementobj[0].insertAdjacentElement('beforeend',p_first);
// 插入 html 写法，入参有四种类型：
// beforebegin：目标元素的前面
// afterbegin：目标元素中，第一个子节点之前
// beforeend：目标元素中，最后一个子节点之后
// afterend：目标元素的后面
var p_html = '<p>我是一个 p 标签！</p>';
elementobj[0].insertAdjacentHTML('beforeend',p_html);
// 用 p_html 替换目标元素中的全部内容
elementobj[0].innerHTML = p_html;

二.删除元素

// 堆代码 duiaima.com
// 删除指定的元素
document.getElementById('elementid').remove();
$("#elementid").remove();
$("p").remove(".italic"); // 条件删除，目的：删除 class 名为“italic”的全部 p 标签

// 连同父级元素一同删掉（注：此处省略了空对象 null 的判断）
document.getElementById('elementid').parentNode.remove();
$("#elementid").parent().remove();

// 清空一个元素，即删除一个元素的所有子元素
function RemoveAllChildNode(elementid)  {
    var elementobj = document.getElementById(elementid);
    while(elementobj.hasChildNodes()) // 一直循环到 elementobj 不包含子节点
    {
        elementobj.removeChild(elementobj.firstChild);
    }
}
$('#elementid').parent().empty(); // JQuery 一句话可搞定

本文讲解了如何用js对元素进行新增和删除操作，讲解了常用方法如appendChild，beforebegin，afterbegin，beforeend，afterend的使用。希望对于大家掌握如何用js进行元素的新增，删除操作有帮助。