1、创建一个元素

docunment.createElement( tag )；创建一个元素节点

let div = document.createElement（“div”）；创建一个div标签

document.createTextNode（ Text ）；创建一个文本节点

let textNode = document.createTextNode('Here I am');

2、插入方法

对于文本和元素来说使用：

• node.append(...nodes or strings) —— 在 node 末尾 插入节点或字符串，
• node.prepend(...nodes or strings) —— 在 node 开头 插入节点或字符串，
• node.before(...nodes or strings) —— 在 node 前面 插入节点或字符串，
• node.after(...nodes or strings) —— 在 node 后面 插入节点或字符串，

对于HTML代码来说：

• "beforebegin" —— 将 html 插入到 elem 之前，
• "afterbegin" —— 将 html 插入到 elem 开头，
• "beforeend" —— 将 html 插入到 elem 末尾，
• "afterend" —— 将 html 插入到 elem 之后。

3、节点移除

node.remove（）

    <ul id="list"><li>1</li><li>2</li><li>3</li></ul><script>const lis = document.querySelectorAll("#list li");// 移除节点setTimeout(() => {lis[1].remove()    // 将lis的第二个元素移除}, 2000);</script>

4、克隆节点

    <ul id="list"><li>1</li><li>2</li><li>3</li></ul><script>const list = document.getElementById("list");// 克隆节点console.log(list.cloneNode())      // 浅复制，复制表面console.log(list.cloneNode(true))  // 深复制</script>

 

5、DocumentFragment

创建一个容器，用来装节点，当我们将其插入某个位置时，则会插入装进去的节点

调用：const df = new DocumentFragment();

然后可以往 df 中放节点 ：df.append(......)

再把df放到其他标签元素内：？？？.append（df）

这样，DocumentFragment 先把节点放到容器中，再添加到页面上，页面只要渲染一次，提升性能

    <ul id="list"><li>one</li><li>two</li><li>three</li></ul><script>const list = document.getElementById("list");//  DocumentFragment 先把节点放到容器中，再添加到页面上，页面只要渲染一次，提升性能//  使用数组也可以达到同样的效果const fragment = new DocumentFragment();for (let i = 0; i <= 10; i++) {const li = document.createElement("li");li.innerText = i;fragment.append(li)}list.append(fragment); // 一次渲染页面// 数组const fragment1 = [];for (let i = 0; i <= 10; i++) {const li = document.createElement("li");li.innerText = i;fragment1.push(li)}list.append(...fragment1); // 一次渲染页面</script>