Javascript 检测加载到div中的新内容

我正试图在一个基于javascript的远程网络帽上为自己定制一个“昵称荧光笔”。显然，我希望每次我的昵称出现在聊天中时，都会播放一个声音

在此聊天中有一个#TheChatDiv，其中每当用户编写新内容时，都会添加一个新的.NewChatText

到目前为止，我已经尝试过：

$('#TheChatDiv').bind("DOMSubtreeModified",function(){
 // Do things, like play the song of your people.
});

这实际上效果很好，只是我无法提取发布的聊天的文本。问题是，我还需要阅读发布的文本，在其中检测我的昵称，并使我的代码按需要运行

---

你知道我该怎么做吗？

对我来说，更好的方法是直接在你的

receiveMessage

函数中插入高亮逻辑，在该函数中创建

NewChatText

，并将其附加到

chatdiv

我想你有这样的想法：

function receiveMessage(message) {
    var chat = $('#TheChatDiv');
    $('<div>')
        .text(message)
        .addClass('NewChatText')
        .appendTo(chat);

    if (message.indexOf('YourNickName') {
        // Play sound, highlight etc.
    }
}

函数接收消息（消息）{
var chat=$（'TheChatDiv'）；
$('')
.文本（信息）
.addClass（'NewChatText'）
.appendTo（聊天）；
if（message.indexOf（'your昵称'））{
//播放声音、突出显示等。
}
}

试试这个：

var nickname = $('.NewChatText .nickname').text();
if (nickname == 'YOURNAME') {
   // Insert your code here, the autor of .NewChatText is 'YOURNAME'
}

---

如果这不是您正在搜索的响应，您应该更详细地描述您的问题。

您通常应该在聊天元素中插入消息时创建一个事件或启动一个函数，然后在添加的消息中搜索您正在搜索的内容，但是如果这不是一个选项，您通常最好使用g而不是不推荐的DOMSubtreeModified事件，类似这样的事件

var observer = new MutationObserver(function(mutations) {
  $.each(mutations, function(_, mutation) {
      $.each(mutation.addedNodes, function(_, node) {
          if ( $(node).text().indexOf('Cyc') != -1) {
              // Play sound for Cyc
          }
      });
  });    
});

observer.observe(
    $('#TheChatDiv').get(0), 
    { attributes: true, childList: true, characterData: true }
);

---

你的.NewChatText元素的结构是什么？这是DateMyNick消息

contains（）

检查一个DOM元素是否是另一个DOM元素的后代。你可能会想到

：contains

选择器，但它们完全不同。我的错，它包含在其他编程语言中，在JS its.indexOf中（“oo”）！=-1'这是一个非常聪明的方法！但是，我没有为我工作，我不知道为什么。每个（突变，函数（u，突变）{都能工作，但添加的节点不能工作。经过一些测试，检测到的突变.type似乎是“属性”这很奇怪，因为我真的看到了一个新的聊天信息。我终于设法让它工作。非常感谢你的想法！