1.创建元素三种方式介绍
1.document.write() 可能会覆盖原本内容
解析字符串识别标签
2.innerHTML：创建元素过多时（100以内可以忽略），会损耗性能
解析字符串识别标签
直接赋值 元素.innerHTML 会替换原本内容，如果不想替换使用 += 拼接
3.document.createElement() (dom推荐方式)
动态创建一个dom对象（空标签，需要自己设置属性）在内存中
需要使用appendChild来添加到HTML
document.write():慎用，因为可能会覆盖原本的内容
覆盖内容的原理了解即可：编译器从上往下解析HTML的时候会形成一个文档流，这个文档流会在文档所有的HTML标签解析后关闭。不会覆盖的情况：如果在关闭这个文档流之前调用document.write()，则不会覆盖会覆盖的情况：如果在关闭文档流之后调用document.write()，会开启一个新的文档流，此时会把上一个文档流中的内容覆盖
2.练习：点击按钮创建多个标签
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <button id="btn">点我</button> <script> //注册事件 document.querySelector('#btn').onclick = function(){ // 1.innerHTML:1340.5ms // console.time() // for(let i = 1;i<=99;i++){ // document.body.innerHTML += '<p>我是第' + i + '个p标签</p>' // }; // console.timeEnd() // 2.createElement : 2ms console.time() for(let i = 1;i<=1000;i++){ // 1.创建空标签 (1)空标签 (2)只是在内存创建，需要手动添加 let p = document.createElement('p'); //2.添加属性 p.innerText = '我是第' + i + '个p标签'; // 3.添加到页面: appendChild() document.body.appendChild(p); }; console.timeEnd() } </script> </body> </html>
3.添加子元素：appendChild()
appendChild()添加元素有三种情况
（1）如果是一个新的子元素，则默认会添加到最后
（2）如果是一个已存在的子元素，相当于移动到最后面
（3）如果添加的元素有子元素，子元素也会一起移动到最后面
4.插入子元素：inertBefore()
insertBefore:插入子元素到指定位置
语法： 父元素.insertBefore(要插入的标签，插入到哪一个标签前面)
特点：与appendChildNode一致
（1）如果是新元素则插入到指定位置
（2）如果是已存在元素则移动到指定位置
（3）如果元素有子元素，则子元素随着它一起移动
如果想插入到某元素后面，没有直接的api，可以先获取该元素的下一个元素，然后插入到下一个元素前面即可
5.替换子元素：replaceChild()
替换子元素：replaceChild() 语法：父元素.replaceChile(新元素,旧元素)
特点：
1.如果是新创建的元素，则直接替换
2.如果是已存在的元素（不论这个元素是自己的子元素还是别人的）会将新元素移动到旧元素位置，并且旧元素被移除
3.如果已存在的元素有子元素，则子元素会随着父元素一起替换
6.移除子元素：removeChild()
removeChild:移除子元素 语法：
父元素.removeChild(子元素)
1.不能自己移除自己（只能让父元素干掉自己）
2.父元素只能移除自己的子元素，不能移除别人的子元素（只有父元素才能干掉自己）
7.克隆元素：cloneNode()
cloneNode：克隆元素 语法：
元素.cloneNode(布尔) false：默认，浅克隆 true：深克隆
1.克隆目标元素
2.可能分为两种
浅克隆：只克隆元素本身，不包含子节点（文本、元素）
深克隆：克隆元素本身以及其子节点（文本、元素）
