Отлавливать изменения в блоке и оповещать об этом

Question

Подскажите какими современными методами можно отловить изменения внутри блока? Допустим внутри блока .messages сейчас такое дерево:

<div id="you">
<div id="author">%AUTHOR%</div>
<div id="text">%MESSAGE%</div>
</div>
<div id="talker">
<div id="author">%AUTHOR%</div>
<div id="text">%MESSAGE%</div>
</div>

После отправки AJAX запроса, полученный от него ответ заносится в блок и теперь там такое дерево:

<div id="you">
<div id="author">%AUTHOR%</div>
<div id="text">%MESSAGE%</div>
</div>
<div id="talker">
<div id="author">%AUTHOR%</div>
<div id="text">%MESSAGE%</div>
</div>

<div id="you">
<div id="author">%AUTHOR%</div>
<div id="text">%MESSAGE%</div>
</div>
<div id="talker">
<div id="author">%AUTHOR%</div>
<div id="text">%MESSAGE%</div>
</div>

Мне необходимо что-бы к моменту "увеличения" блока пользователю выводилось оповещение о поступлении новых сообщений. Как это сделать?

Answer 1

тут нужно больше конкретики, так как для решения данного вопроса множество решений:

1. Если это нужно указывать только пользователю, который отправляет сообщение, то после отправки ajax запроса приходит ответ и исходя из этого ответа можно показывать уведомление если сообщение добавлено и не нужно считать кол-во и высоту блоков.

2. Если это чекается автоматом, лучше использовать аля сокетные штуки, но на край можно повесить проверку о наличии новых сообщений через setInterval, внутри него повесить ajax запрос на получении информации о новых сообщений или о кол-ве всех сообщений данного юзера и сравнивать с значением текущим