JS DOM编程复习笔记 -- insertAdjacentHTML()

2024-02-22 23:14:03

在JavaScript中，DOM（Document Object Model）是网页内容的编程接口。它允许您操纵网页中的元素，以便在不重新加载页面的情况下动态地更新内容。insertAdjacentHTML()方法是DOM操作中一个非常有用的方法，它允许您将HTML代码插入到现有元素中。

insertAdjacentHTML()方法

insertAdjacentHTML()方法有四个参数：

position：这是一个字符串，指定要插入HTML代码的位置。可以是以下四个值之一：
- "beforebegin"：在元素之前插入HTML代码。
- "afterbegin"：在元素内部，在第一个子元素之前插入HTML代码。
- "beforeend"：在元素内部，在最后一个子元素之后插入HTML代码。
- "afterend"：在元素之后插入HTML代码。
HTMLString：要插入的HTML代码。可以是字符串或DOM元素。
container：要将HTML代码插入到的元素。可以是DOM元素或元素的ID。

insertAdjacentHTML()方法的兼容性

insertAdjacentHTML()方法兼容所有现代浏览器。但是，在IE8和更早版本中，此方法不支持"beforebegin"和"afterend"这两个位置。

insertAdjacentHTML()方法的用法

以下是一些insertAdjacentHTML()方法的用法示例：

// 在元素之前插入HTML代码
document.getElementById("myElement").insertAdjacentHTML("beforebegin", "<p>这是在元素之前插入的HTML代码</p>");

// 在元素内部，在第一个子元素之前插入HTML代码
document.getElementById("myElement").insertAdjacentHTML("afterbegin", "<p>这是在元素内部，在第一个子元素之前插入的HTML代码</p>");

// 在元素内部，在最后一个子元素之后插入HTML代码
document.getElementById("myElement").insertAdjacentHTML("beforeend", "<p>这是在元素内部，在最后一个子元素之后插入的HTML代码</p>");

// 在元素之后插入HTML代码
document.getElementById("myElement").insertAdjacentHTML("afterend", "<p>这是在元素之后插入的HTML代码</p>");