原生js中的对元素的添加,删除,复制,创建等操作.

目录

创建节点

添加元素

1.appendChild()方法

insertAdjacentHTML()方法

insertBefore()方法

删除元素

1.removeChild（）方法

2.remove（）方法

复制节点
创建节点

通常的方法就是使用 document.createElem ent(“”)这种方式来创建

添加元素

app endCh ild（）方法，在父级元素中插入一个Nod e 节点，插入到末尾
insertAdja centHTML（）方法，这个方法比较使用

1.app endCh ild()方法

node代表的是父节点，而child代表的是子节点。只不过这种添加方式是加在父节点的子节点的末尾。相当于追加数组 push。

insertAdja centHTML()方法

insertAdja centHTML() 是Elem ent的API中的一个方法，可以将字符串文本转化为你想要的节点（Nod e），并且插入到你想要插入的位置中。而且它并不会向innerHTML一样会替换掉已有的节点，而是会插入到指定位置。

一共有四个位置可供选择

我是这么理解的可以把选中的元素想象成一个盒子，

begin就是盒子最上面的一条线，end就是盒子最下面的一条线

那么b eforebe gin就是在盒子（本元素）最上面的线的前面所以就是在本元素前面添加

而a ft erend则就是在盒子（本元素）最下面的线的后面所以就是本元素的下面

let text = "文化底蕴" 
//这个medium是获取的div元素
let medium=document.querySelector("#medium")
medium.insertAdjacentHTML("afterend",`<li&gt;${text}</li&gt;`)

注意：不能这么使用,就是先通过documnet.createElement()创建元素，

然后再通过insertAdja centHTML()添加元素.

因为insertAdjacentHTML添加的是字符串，而他可以解析字符串中的element 标签，

但是不能直接传入元素节点，否则就会显示这样

<div class="box2"&gt;</div&gt;
//首先创建一个span元素
let span= document.createElement("span") 
//给span元素内部添加内容
span.innerHTML="醉里挑灯看剑，梦回吹角连营" 
box2.insertAdjacentHTML("afterbegin",span)

而将这个方法更改成insertAdjacentElement就可以了，他只能添加元素节点。

let span= document.createElement("span") 
span.innerHTML="醉里挑灯看剑，梦回吹角连营" 
box2.insertAdjacentElement("afterbegin",span)

这三个兄弟方法类似，只是传入的第二个参数有些不同

insertAdjacentElement()第二个参数只能插入元素节点，传文本节点会报错，

insertAdjacentHTML()传入的第二个参数会当成字符串解析，会解析字符串中的element元素.

只能传入字符串

insertAdjacentText()传入的第二个参数都会当作字符串解析

insertBefore()方法

Node.insertBefore() 方法在参考节点之前插入一个拥有指定父节点的子节点

而所谓的“拥有指定父节点”，就是指被参照的节点的父节点就是调用insertBefore方法的节点。

注意：被参照的节点的父节点就是调用insertBefore方法的节点

let insertedNode = parentNode.insertBefore(newNode, referenceNode);

//newNode：将要插入的节点
//referenceNode：被参照的节点（即要插在该节点之前）
//insertedNode：插入后的节点
//parentNode：父节点
//而实际上insertedNode===newNode
console.log(box3.insertBefore(p3, p1)===p3);//true