.insertadjacenthtml()方法如何使用

.insertAdjacentHTML() 方法是 DOM API 中的一个函数，它可以在指定元素的相对位置插入 HTML 元素或文本。

该方法接收两个参数， 个参数是相对位置的字符串，第二个参数是要插入的 HTML 元素或文本。

相对位置字符串有四种类型：

1. beforebegin：在指定元素之前插入 HTML 元素或文本。

2. afterbegin：在指定元素的 个子元素之前插入 HTML 元素或文本。

3. beforeend：在指定元素的最后一个子元素之后插入 HTML 元素或文本。

4. afterend：在指定元素之后插入 HTML 元素或文本。

例如，下面的代码将在 id="myDiv" 的元素之前插入一段段落文本：

document.getElementById("myDiv").insertAdjacentHTML("beforebegin", "<p>Hello, world!</p>");

这段代码使用了 insertAdjacentHTML() 方法，传入了 beforebegin 参数作为相对位置字符串，第二个参数是要插入的 HTML 元素或文本，即 "<p>Hello, world!</p>"。

又例如，下面的代码将在 id="myDiv" 的元素的最后一个子元素之后插入一个链接：

document.getElementById("myDiv").insertAdjacentHTML("beforeend", '<a href="https://www.example.com">Example</a>');

这段代码使用了 insertAdjacentHTML() 方法，传入了 beforeend 参数作为相对位置字符串，第二个参数是要插入的 HTML 元素或文本，即 '<a href="https://www.example.com">Example</a>'。

需要注意的是，使用 insertAdjacentHTML() 方法插入的 HTML 元素并不会自动执行 JavaScript 代码或 CSS 样式，需要手动添加对应的代码或样式。

在使用 insertAdjacentHTML() 方法时需要注意对应的安全性问题，需要过滤掉不安全的字符或代码，防止潜在的 XSS 攻击。