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.可能分为两种
-
浅克隆：只克隆元素本身，不包含子节点（文本、元素）
-
深克隆：克隆元素本身以及其子节点（文本、元素）
-
扫一扫
374
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
