监听 DOM 的变化答案

【问题标题】：Listen for changes in DOM监听 DOM 的变化
【发布时间】：2014-06-27 21:10:00
【问题描述】：

我正在研究我网站的一部分。这是相关的 HTML：

<div id = "original">
    <img src = "picture.png" alt = "A picture" id = "picture">
    <p id = "text">Some text</p>
</div>
<div id = "reflection"></div>

我的想法是将 div#original 的内容复制到 div#reflection，如下所示：

<script>
    function reflect()
    {
        var original = document.getElementById("original");
        var reflection = document.getElementById("reflection");
        reflection.innerHTML = original.innerHTML;
    }
</script>

我知道，这会使 HTML 无效，在整个项目中，我会遍历复制的元素并将 ID 设置为没有副作用。我只是认为这里没有必要包括在内。

我的问题是我要反映的 HTML 是动态的，所以它可能会改变。那么反射是错误的。我已经为此搜索了一个事件处理程序，但没有找到。我发现的唯一一个是 onchange，但显然这会监听属性的变化，而不是子元素。是否还有其他的，或者我只是使用了 onchange 错误？

感谢您的帮助！
GeF

我知道我可以为每个元素添加 onchange，但这对我来说似乎不是很好的风格。

【问题讨论】：

那么，你的问题是什么？
您是说@nicael 不会无效吗？因为它会。
@putvande 他显示有效代码.. 否？
这是有效的代码，但是通过复制 #original 的 innerHTML 并将其粘贴到 #reflection 您将拥有具有相同 ID 的元素，这确实使其无效。
抱歉，我只是不小心点击了提交而不是预览。给我4票是不是很糟糕？还是问题不好？我真的不明白。

标签： javascript html

【解决方案1】：

您可以做的最简单的事情是在每次更改#original 的内容时向reflect() 添加回调。

如果这不是一个选项，您可以查看MutationObserver (documetation)，如下所示：Is there a JavaScript/jQuery DOM change listener?

【讨论】：