动态添加DOM元素的方式

应用场景

由于频繁操作DOM会占用较多的内存资源，为了减少内存的消耗，就要尽可能少地操作DOM。但是有需要动态添加，我们可以成批次的添加，就是将多个要添加的DOM元素先放在一起，然后一次性的添加上去

docuemnt.createDocumentFragment()

该方法可以生成一个文档片段，并且该文档片段也可以添加子元素，当该文档片段添加到页面上时本身并不会被添加到页面上，相当于一个虚拟的父元素，只是一个容器
如果我们要添加多个DOM元素时，可以先创建一个文档片段

var frag = document.createDocumentFragment();

此时已经创建了一个文档片段
再创建一个要添加到页面上的元素

var oP = document.createElement("p");
//设置元素内容
oP.innerText="hello world";

此时已经创建了一个p元素
再将要添加的元素添加到文档片段上

frag.appendChild(oP);

此时已经将p元素添加到文档片段上了
再将文档片段添加到页面上

document.body.appendChild(frag);

此时p元素就添加到页面上了

由于只是添加一个元素对浏览器的负担没有那么重，但是当需要添加多个元素时此种方法就可以有效的减少操作DOM的次数

element.innerHTML

这种方法也可以一次性添加多个元素到页面上，利用元素的innerHTML属性可以将要添加的元素拼接成字符串然后在一次性添加到页面上
先创建一个变量用来存储拼接的字符串

var str= `<p>hello world</p>`;

在将字符串赋值给body

document.body.innerHTML=str;

此时p元素已经添加到页面上了

这种方法比之前的方法更加简单，不需要多次调用创建元素的方法，只需要用字符串就行

document.write()

这种方法也可以添加元素，只不过该函数会将页面上原有的元素覆盖，所以这种方法不常用只有需要替换页面上的元素的时候可以使用
先创建一个变量存储要添加的元素

var str="<p>hello</p>";

在调用document.write()方法

document.write(str);

此时元素已经添加到页面上了

前面已经讲了该方法会覆盖页面上的元素，在使用时视需求而定

总结

1. 这几种方法都可以动态添加DOM元素，各有优劣，视需求而定
2. 第一种和第二种方法还可以在一定程度上减少操作DOM的次数，第三种方法不会减少操作DOM的次数，并且会覆盖页面上原有的元素