Question

我想在html内容发生变化时触发操作。下面的代码更改了myId元素的html内容，当按下click时，所以myId的html内容发生了变化，现在我想触发另一个动作console.log("myalert")。< / p>

<html>
<body>
    <input type="button" id="buttonid" value="click">
    <div id = "myId">
    </div>
</body>
<script>
var button = document.getElementById("buttonid");
    button.addEventListener("click", function () {
        console.log("alert");
        document.getElementById('myId').innerHTML = '<input type="button" id="button3" value="click2">'
    });

var button2 = document.getElementById("myId");
button2.addEventListener("change", function () {
        console.log("myalert");        
    });    
</script>
</html>

我如何达到我的要求？

注意：我不想使用jQuery。

Answer 1

没有真正的事件。但是，您可以通过侦听间隔循环中的更改来解决此问题。我不会真的推荐它，但是我不能决定你到底使用了什么。这将是：

var myIdContent = document.getElementById('myId').innerHTML;
setInterval(function(){
  if(myIdContent !== document.getElementById('myId').innerHTML){
    myIdContent = document.getElementById('myId').innerHTML;
    // Element has changed, do some modifications here
  }
}, 1000); // Lower number for shorter intervals

然而，当div的内容增长时，这可能变得非常慢。更好的方法是在从javascript更改html时调用事件或“更改”函数。您需要编写更多内容，还可以更好地控制何时发生更改事件。

对不涉及比较内容的答案提问： Detect changes in the DOM

当html内容改变时的火灾事件

1 个答案: