如何在insertAdjacentHTML执行完成后立即获取新增元素？

你遇到的问题可以通过避免依赖DOM查询来彻底解决，insertAdjacentHTML本身是同步执行的，理论上插入后元素就已存在，但getElementById可能因拼写错误、全局ID冲突或极端渲染延迟导致查询失败。下面是几种更可靠的方案：

方案1：插入后直接取父元素的最后一个子元素 #

因为你用的是beforeend位置插入，刚添加的元素必然是父元素的最后一个子元素，直接获取即可，无需ID查询：

for(let i = 0; i < someArray.length; i++)
{
    someDiv.insertAdjacentHTML('beforeend', `<div id='post-${i}'>...</div>`);
    // 直接取最后一个子元素，高效且可靠
    let insertedObject = someDiv.lastElementChild;
    // 这里可以正常操作insertedObject
}

方案2：先创建元素再插入（替代insertAdjacentHTML） #

放弃直接插入HTML字符串，先通过createElement创建元素，设置好内容和属性后再插入DOM，这样一开始就能拿到元素引用：

for(let i = 0; i < someArray.length; i++)
{
    let insertedObject = document.createElement('div');
    insertedObject.id = `post-${i}`;
    insertedObject.innerHTML = '...'; // 填充你的内容
    someDiv.insertAdjacentElement('beforeend', insertedObject);
    // 此时insertedObject已在DOM中，直接使用
}

方案3：先解析HTML字符串为元素再操作 #

如果必须用HTML字符串模板，可以用DOMParser先把字符串解析为DOM元素，拿到引用后再插入：

for(let i = 0; i < someArray.length; i++)
{
    const htmlStr = `<div id='post-${i}'>...</div>`;
    const doc = new DOMParser().parseFromString(htmlStr, 'text/html');
    let insertedObject = doc.body.firstElementChild;
    // 先操作元素，比如绑定事件、修改样式
    someDiv.appendChild(insertedObject);
}

这些方法都不需要setTimeout，能立即拿到新增元素的引用，效率和可靠性都更高。

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