Question

我正在研究我网站的一部分内容。这是相关的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，但这对我来说似乎不太好。

Answer 1

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

如果这不是一个选项，您可以按照此处的建议查看MutationObserver（documetation）：Is there a JavaScript/jQuery DOM change listener?

听取DOM的变化

1 个答案: