【DOM】DOM操作之如何添加、删除、替换元素_04

结果:

go to tmooc

(3). 将新元素添加到DOM树

a. 问题: 用创建的新元素对象，暂时是游离在内存中，并没有被加入到DOM树。而浏览器显示哪些元素，完全依照DOM树的内容来生成。所以，新元素不会被浏览器加载到页面上，用户暂时是看不到的！

b. 解决: 今后只要创建新元素，最后一步都是将新元素添加到DOM树上指定的父元素下。

c. 如何: 3种:

1). 在一个指定的父元素下所有直接子元素结尾追加新元素；

父元素.(新元素)

追加 孩子

2). 插入到一个父元素下的某个现有元素之前:

父元素.(新元素, 现有元素)

插入(到)之前

3). 用新元素替换指定父元素下的某个现有元素

父元素.(新元素, 现有元素)

替换 孩子

2. 示例: 动态创建a元素和input元素

.html

运行结果：

3. 示例: 动态生成表格内容

.html

ename
salary
age

运行结果：

4. 优化

(1). 原理: 浏览器中显示什么元素，完全根据DOM树中的内容生成。只要程序执行过程中，修改了DOM树的内容，浏览器就被迫重新渲染整个界面。

(2). 问题: 如果频繁修改DOM树的内容，导致浏览器频繁重新渲染整个界面，将极大的降低页面的加载效率！

(3). 解决: 尽量减少操作DOM树的次数！还要保证内容不少！

a. 第一种情况: 如果同时添加父元素和子元素时，应该先在内存中将所有子元素都添加到父元素中。最后再一次性将整个父元素加到DOM树上。

b. 第二种情况: 如果父元素已经在页面上了，想添加多个平级子元素，必须借助文档片段对象来优化。

1). 什么是文档片段对象: 在内存中临时保存多个平级子节点的虚拟父节点对象

2). 如何: 3步:

i. 先创建文档片段()对象

var 文档片段对象=.nt();

创建 文档 片段

ii. 再将多个平级子元素添加到文档片段对象中

文档片段对象.(子元素)

iii. 最后将整个文档片段对象一次性添加到DOM树中父元素下

父元素.(文档片段对象)

3). 强调: 虽然加入文档片段的子元素，以方式添加到文档片段。但是，当文档片段将所有子元素送到DOM树上指定父节点下之后文档片段对象就释放了！不会成为DOM树上一级真实的节点！

4). 示例: 动态生成表格内容(tbody已经在页面上)

.html

ename
salary
age

运行结果：

5. 删除元素: 父元素.(子元素)

通过父级删除子级()方法，是删除元素里面指定的子元素

扩展：删除元素有两种写法

1.自删，即删除自身：使用()方法，是元素删除自己

2. 删除父级的子级：使用()方法，是删除元素里面指定的子元素

.html

城市：添加一个元素
我是一个P

运行结果：

⬛总结: DOM 5件事: 增删改查+事件绑定:

1. 查找元素: 4种查找方式

2. 修改元素: 3种东西可修改

3. 添加/删除元素:

(1). 只添加一个新元素: 3步

a. 创建一个新元素:

var 新元素=.("标签名")

b. 为元素设置关键属性:

新元素.属性名="属性值";

c. 将新元素添加到DOM树: 3种:

1). 末尾追加:

父元素.(新元素)

2). 在某个元素前插入:

父元素.(新元素, 现有元素)

3). 替换某个元素:

父元素.(新元素, 现有元素)

(2). 优化: 尽量减少操作DOM树的次数，2种:

a. 如果同时添加父元素和子元素，应该先将子元素添加到父元素，最后再将父元素一次性添加到DOM树

b. 如果父元素已经在页面上，要添加多个平级子元素。应该利用文档片段对象

1). 创建文档片段对象:

var frag=.nt()

2). 将子元素添加到文档片段对象中:

frag.(子元素)

3). 最后将文档片段对象一次性添加到DOM树上父元素下

父元素.(frag);

(3). 删除元素: 父元素.(子元素)

Tips：自删使用()方法，是元素删除自己

【后文传送门】HTML DOM常用对象: 对常用元素的简化操作_05

​

如果这篇【文章】有帮助到你，希望可以给【青春木鱼】点个赞，创作不易，相比官方的陈述，我更喜欢用【通俗易懂】的文笔去讲解每一个知识点，如果有对【前端技术】感兴趣的小可爱，也欢迎关注❤️❤️❤️【青春木鱼】❤️❤️❤️，我将会给你带来巨大的【收获与惊喜】！