使用insertAdjacentHTML插入元素时，queryselector不再拾取该元素

使用insertAdjacentHTML插入元素时，querySelector不再拾取该元素。

insertAdjacentHTML是DOM API中的一个方法，用于在指定元素的相对位置插入HTML代码。它接受两个参数，第一个参数是一个字符串，用于指定插入的位置，包括"beforebegin"、"afterbegin"、"beforeend"和"afterend"；第二个参数是要插入的HTML代码。

当使用insertAdjacentHTML插入元素时，这个元素并不会立即被DOM树所识别，因此在插入后，querySelector方法无法直接找到该元素。这是因为querySelector方法是基于DOM树进行元素查找的，而插入的元素尚未被DOM树所包含。

如果需要在插入元素后使用querySelector方法获取该元素，可以在插入元素后手动调用querySelector方法进行查找。例如：

const container = document.getElementById('container');
container.insertAdjacentHTML('beforeend', '<div id="newElement">New Element</div>');

const newElement = container.querySelector('#newElement');
console.log(newElement); // 输出: <div id="newElement">New Element</div>

在上述代码中，首先通过getElementById方法获取到容器元素container，然后使用insertAdjacentHTML方法在容器的末尾插入一个新的div元素。最后，通过querySelector方法获取到新插入的元素newElement，并将其输出到控制台。

需要注意的是，如果插入的HTML代码中包含有id属性或其他具有唯一性的属性，可以通过这些属性来查找插入的元素。另外，如果插入的元素是一个集合（例如多个div元素），可以使用querySelectorAll方法获取到所有插入的元素。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云云服务器（CVM）：提供弹性计算能力，满足各类业务需求。详情请参考：https://cloud.tencent.com/product/cvm
• 腾讯云云数据库MySQL版：提供高性能、可扩展的MySQL数据库服务。详情请参考：https://cloud.tencent.com/product/cdb_mysql
• 腾讯云对象存储（COS）：提供安全、稳定、低成本的云端存储服务。详情请参考：https://cloud.tencent.com/product/cos
• 腾讯云人工智能：提供丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等。详情请参考：https://cloud.tencent.com/product/ai