Javascript在Ajax之后只能访问一些新DOM，这有什么原因吗？

我正在学习JS，在实现AJAX的过程中，我遇到了一些奇怪的行为

在我的代码中，我有以下内容

select元素中的

onchange

运行一个脚本，其中ajax使用保存列表的预览以及填充有字段的表单填充上述div，如果需要，可以编辑这些字段以编辑列表

表单中有一个按钮，用于在保存前预览对列表的更改

下面是将由不响应JS的“预览”脚本填充的代码

           <article class="listing" id="listing_preview" style="display:none;" title="">
             <a href="" id="preview_url" target="_blank"><img id="preview_picture" src="" alt=""><h3 id="preview_name"></h3>
                <span id="preview_phone"></span><address><span id="preview_address_1"></span><br><span id="preview_address_2"></span>
                <span id="preview_city_state_zip"></span></address>
             </a>
           </article>

作为最后手段，我试图通过Firefox中的控制台操纵列表。控制台能够找到文章

document.getElementById（'listing_preview'）

但无法在DOM中生成更改

document.getElementById（'listing_preview'）.style.display='block'

不会让它出现

我甚至可以

在控制台中对对象进行更改，但该更改不会显示在页面上。
ie
document.getElementById（'preview_name'）。innerHTML='Hello'

此更改将显示在控制台中，但不会显示在页面中

这是奇怪的部分。已保存的清单在已保存的清单表单中由ajax填充，可以完美地工作，并且可以按照预期通过控制台和脚本进行操作


是否有任何原因使ajax填充的div的一部分能够按预期工作，而同一div中的其他DOM对象却不能？我似乎没有任何坏掉的html元素会把事情弄糟

对控制预览的JS的引用加载在ajax填充的代码的最后

任何帮助都将不胜感激。
基本问题是您不能在页面中重复ID，它们是唯一的定义
getElementById（）
如果存在重复项，将始终返回第一个，因为它不希望有多个重复项。请确保您的id是唯一的，或者使用document.getElementsByClassName（）修改与特定类匹配的所有元素非常感谢您的回复。这正是问题所在。我已经完成了页面的另一部分，并将显示设置为“无”，所以我有点忘记了它。除此之外，在Firefox中，当您右键单击并查看页面源时，新的Ajax内容不会显示，因此在搜索时，我没有看到重复的id。只有当我回到代码本身，查看php包含时，我才发现了它。非常感谢你的小费！！基本问题是你们不能在一个页面中重复ID，它们是唯一的
getElementById（）
如果存在重复项，将始终返回第一个，因为它不希望有多个重复项。请确保您的id是唯一的，或者使用document.getElementsByClassName（）修改与特定类匹配的所有元素非常感谢您的回复。这正是问题所在。我已经完成了页面的另一部分，并将显示设置为“无”，所以我有点忘记了它。除此之外，在Firefox中，当您右键单击并查看页面源时，新的Ajax内容不会显示，因此在搜索时，我没有看到重复的id。只有当我回到代码本身，查看php包含时，我才发现了它。非常感谢你的小费！！