insertAdjacentHTML与insertAdjacentElement的区别及使用报错疑问

嗨，我来帮你把这两个API的区别和你遇到的问题掰扯清楚～

首先得先搞懂这两个概念的本质区别，这是理解两个API差异的基础：

• Element（DOM元素对象）：这是浏览器已经完成解析、存在于DOM树里（或已经创建好的）的可操作节点。比如你用document.createElement('p')生成的对象，或者通过document.querySelector('.box')抓取到的现有节点，都是Element对象，你可以直接给它加事件、改样式。
• HTML字符串：这是纯文本形式的HTML代码，比如<span class="text">Hi</span>，它本身只是一串字符，浏览器需要先把它解析成DOM节点，才能变成页面上可交互的元素。

这两个方法都是用来在指定元素的某个位置插入内容，但核心要求和行为完全不同：

1. 传入的第二个参数类型要求不同 #

这是你报错的直接原因：

• insertAdjacentHTML(position, htmlStr)：第二个参数必须是HTML格式的字符串。浏览器会自动帮你把这个字符串解析成对应的DOM节点，然后插入到指定位置（比如beforeend就是元素内部的末尾）。
• insertAdjacentElement(position, element)：第二个参数必须是已经存在的DOM Element对象，绝对不能传字符串！你之前传了HTML字符串给它，它找不到对应的Element，自然就报错了。

2. 插入行为与返回值不同 #

• insertAdjacentHTML：插入的是解析后的新DOM节点（如果你的字符串包含多个元素，会一次性插入所有节点），它的返回值是undefined。而且这个操作是创建新节点，不会影响DOM里已有的其他节点。
• insertAdjacentElement：插入的是你传入的那个Element对象——如果这个元素已经在DOM树里了，它会被从原来的位置移动到新位置，而不是复制。另外，这个方法会返回被插入的元素（插入成功的话），方便你后续操作。

3. 使用场景不同 #

• 当你手里有现成的HTML字符串（比如后端返回的渲染好的内容、模板字符串），直接用insertAdjacentHTML最省心，一步完成解析+插入。
• 当你已经创建好或拿到了一个DOM元素（比如动态生成的按钮、从页面其他地方复用的元素），想要把它放到目标位置，就用insertAdjacentElement，因为不需要额外解析步骤，性能更优。

你用insertAdjacentElement('beforeend', html)报错，就是因为第二个参数html是字符串，不符合它的参数要求。如果一定要用这个方法，你需要先把HTML字符串转换成Element对象，比如：

// 先把HTML字符串解析成DOM元素
const tempContainer = document.createElement('div');
tempContainer.innerHTML = html;
const targetElement = tempContainer.firstElementChild; // 假设你的HTML只有一个根元素

// 再用insertAdjacentElement插入
yourTargetNode.insertAdjacentElement('beforeend', targetElement);

不过显然，直接用insertAdjacentHTML('beforeend', html)更简单直接，没必要多这几步转换。

内容的提问来源于stack exchange，提问作者Sack32