js insertadjacenthtml

// 示例代码：使用 insertAdjacentHTML 方法

// 假设我们有一个 HTML 结构如下：
// <div id="container">Hello World</div>

// 获取目标元素
var container = document.getElementById("container");

// 使用 insertAdjacentHTML 方法在不同位置插入 HTML 内容
// 1. 在元素的前面插入
container.insertAdjacentHTML('beforebegin', '<p>这是在容器前面插入的内容</p>');

// 2. 在元素的内部开头插入
container.insertAdjacentHTML('afterbegin', '<p>这是在容器内部开头插入的内容</p>');

// 3. 在元素的内部结尾插入
container.insertAdjacentHTML('beforeend', '<p>这是在容器内部结尾插入的内容</p>');

// 4. 在元素的后面插入
container.insertAdjacentHTML('afterend', '<p>这是在容器后面插入的内容</p>');

解释说明：

• insertAdjacentHTML(position, text) 是一个用于将指定的文本解析为 HTML，并将其插入到 DOM 树中的特定位置的方法。
• position 参数可以取以下四个值之一：
  • 'beforebegin': 在目标元素之前插入。
  • 'afterbegin': 在目标元素内部的第一个子节点之前插入。
  • 'beforeend': 在目标元素内部的最后一个子节点之后插入。
  • 'afterend': 在目标元素之后插入。