方法一：change事件
change事件，在元素的值发生改变时触发，适用于文本域、textarea、select 。 或调用change()方法时可以监听。所以，我们可以模拟change为非表单元素监听change()事件。
1
2 <!Doctype>
3
4 <html>
5
6 <head>
7
8 <meta charset="utf-8">
9
10 <title>change事件</title>
11
12 <style>
13
14 #container {
15
16 min-height: 120px;
17
18 border: 1px solid #aaa;
19
20 }
21
22 </style>
23
24 </head>
25
26 <body>
27
28 <div id="container">
29
30
31
32 </div>
33
34 <button type="button" id="btn">add "aaa" for div</button>
35
36
37
38
39
40 <script src="jquery-1.11.3.js"></script>
41
42 <script>
43
44
45
46 function changes(){
47
48 alert("changes");
49
50 }
51
52
53
54 $("#btn").click(function() {
55
56 $("#container").append("aaa").change();
57
58 });
59
60 $("#container").bind("change", changes);
61
62 </script>
63
64 </body>
65
66 </html>
以上demo中，点击按钮，为div中动态添加内容，添加内容后，手动调用change()方法，为div模拟出change事件。
注： 1.以上demo中是追加的内容，所以没有判断div的内容是否发生变化，如果在其他场景下，可以自己判断div内容是否发生了变化
2 .只要兼容jquery的浏览器都可以兼容此方法。
方法二：DOMNodeInserted事件
经测试，这个DOMNodeInserted事件可以监听到非表单元素的内容的变化，只有在插入节点时有效，相反DOMNodeRemoved事件，只有在移除节点时有效。DOMNodeInserted事件是js提供的一个dom2级事件(具体什么意思，我还没有弄懂，弄懂后回来补充，此处省略1000字。。。)，总之，是可以监听到的。
1
2 <!Doctype>
3
4 <html>
5
6 <head>
7
8 <meta charset="utf-8">
9
10 <title>change事件</title>
11
12 <style>
13
14 #container {
15
16 min-height: 120px;
17
18 border: 1px solid #aaa;
19
20 }
21
22 </style>
23
24 </head>
25
26 <body>
27
28 <div id="container">
29
30
31
32 </div>
33
34 <button type="button" id="btn">add "aaa" for div</button>
35
36
37
38
39
40 <script src="jquery-1.11.3.js"></script>
41
42 <script>
43
44
45
46 function changes(){
47
48 alert("changes");
49
50 }
51
52
53
54 $("#btn").click(function() {
55
56 $("#container").append("aaa");
57
58 });
59
60 $("#container").bind("DOMNodeInserted", changes);
61
62 </script>
63
64 </body>
65
66 </html>
注： 此方法存在ie8及以下浏览器中失效
方法三：定时任务
可以通过定时任务来监听非表单元素的内容变化，如果以上两种方法均不适用的情况下，可以尝试此种方法
1
2 <!Doctype>
3
4 <html>
5
6 <head>
7
8 <meta charset="utf-8">
9
10 <title>change事件</title>
11
12 <style>
13
14 #container {
15
16 min-height: 120px;
17
18 border: 1px solid #aaa;
19
20 }
21
22 </style>
23
24 </head>
25
26 <body>
27
28 <div id="container">
29
30
31
32 </div>
33
34 <button type="button" id="btn">add "aaa" for div</button>
35
36
37
38
39
40 <script src="jquery-1.11.3.js"></script>
41
42 <script>
43
44
45
46 function changes(){
47
48 alert("changes");
49
50 }
51
52
53
54 $("#btn").click(function() {
55
56 $("#container").append("aaa");
57
58 });
59
60
61
62 var div = $("#container").html();
63
64 setInterval(function() {
65
66 var divNew = $("#container").html();
67
68 if(div != divNew) {
69
70 changes();
71
72 div = divNew;
73
74 }
75
76 }, 100);
77
78 </script>
79
80 </body>
81
82 </html>
83
来源：https://www.cnblogs.com/nlyangtong/p/11213254.html