使用insertAdjacentHTML插入元素后，DOM检测元素存在性为何失败？

嘿，我一眼就看出问题所在啦！

核心错误原因 #

你这里踩了一个很容易忽略的API使用误区：insertAdjacentHTML() 这个方法要求传入的第二个参数是HTML格式的字符串，而不是你用document.createElement()创建出来的DOM元素对象。

当你直接把<a>元素传进去时，浏览器会自动把这个DOM对象转换成字符串形式——也就是"[object HTMLAnchorElement]"，然后把这段文本插入到页面末尾，而不是你预期的带有htmlFileLink ID的<a>标签。这就导致页面里根本不存在目标元素，检测时自然弹出"no"。

几种修正方案 #

给你几个简单的解决办法，选哪个都可以：

方案1：改用insertAdjacentElement()插入DOM元素

这个方法就是专门用来插入DOM元素的，参数位置和insertAdjacentHTML()完全一致：

let element = document.createElement('a');
element.id = 'htmlFileLink';
document.body.insertAdjacentElement( 'beforeend', element );
if( document.body.contains( document.getElementById('htmlFileLink') ) ) {
    alert ('yes');
} else {
    alert ('no');
}

方案2：构造HTML字符串传入insertAdjacentHTML()

如果你坚持要用insertAdjacentHTML()，直接写对应的HTML字符串就行：

const htmlStr = '<a id="htmlFileLink"></a>';
document.body.insertAdjacentHTML( 'beforeend', htmlStr );
if( document.body.contains( document.getElementById('htmlFileLink') ) ) {
    alert ('yes');
} else {
    alert ('no');
}

方案3：用最常用的appendChild()添加元素

这是日常开发中添加DOM元素最普遍的方式，简单直接：

let element = document.createElement('a');
element.id = 'htmlFileLink';
document.body.appendChild(element);
if( document.body.contains( document.getElementById('htmlFileLink') ) ) {
    alert ('yes');
} else {
    alert ('no');
}

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