重温当年 DOM 修改：轻松插入 HTML 代码

前端

2023-09-02 03:14:54

在网页开发的奇妙世界中，DOM（文档对象模型）扮演着至关重要的角色。它就好比网页的骨架，定义了网页中各个元素的结构和位置。而要想让网页更具交互性与动态性，就需要对 DOM 进行修改，其中插入 HTML 代码便是常见且实用的操作之一。

一、结识 insertAdjacentHTML：HTML 代码的穿针引线

为了在 DOM 中轻松插入 HTML 代码，我们可以使用 insertAdjacentHTML 方法。该方法巧妙地将 HTML 内容添加到指定元素的指定位置。它接受两个参数：

相对位置：指定插入位置与元素的关系，可选值有：
- beforebegin：在元素本身之前插入。
- afterbegin：在元素内部最前面插入。
- beforeend：在元素内部最后面插入。
- afterend：在元素本身之后插入。
HTML 字符串：要插入的 HTML 代码。

二、动手实践：运用 insertAdjacentHTML 巧妙插入 HTML 代码

掌握了 insertAdjacentHTML 的用法，让我们通过一些实例来巩固对它的理解：

在元素之前插入 HTML 代码：
```
const element = document.getElementById('my-element');
element.insertAdjacentHTML('beforebegin', '这是在元素之前插入的 HTML 代码');
```
这段代码会在 my-element 元素之前插入一个  元素，内容为“这是在元素之前插入的 HTML 代码”。
在元素内部最前面插入 HTML 代码：
```
const element = document.getElementById('my-element');
element.insertAdjacentHTML('afterbegin', '这是在元素内部最前面插入的 HTML 代码');
```
这段代码会在 my-element 元素内部最前面插入一个  元素，内容为“这是在元素内部最前面插入的 HTML 代码”。
在元素内部最后面插入 HTML 代码：
```
const element = document.getElementById('my-element');
element.insertAdjacentHTML('beforeend', '这是在元素内部最后面插入的 HTML 代码');
```
这段代码会在 my-element 元素内部最后面插入一个  元素，内容为“这是在元素内部最后面插入的 HTML 代码”。
在元素之后插入 HTML 代码：
```
const element = document.getElementById('my-element');
element.insertAdjacentHTML('afterend', '这是在元素之后插入的 HTML 代码');
```
这段代码会在 my-element 元素之后插入一个  元素，内容为“这是在元素之后插入的 HTML 代码”。

三、总结与展望：DOM 修改的无限可能

通过 insertAdjacentHTML 方法，我们能够轻松地在 DOM 中插入 HTML 代码，从而实现各种各样的网页内容管理需求。随着编程技术的发展，DOM 修改的应用场景将会更加广泛，为网页开发带来更多可能。掌握 DOM 修改技巧，你将能打造出更具交互性、动态性和美观性的网页，让你的网站脱颖而出。