title: Uncaught RangeError: Maximum call stack size exceeded with innerHTML
body: <p>I'm not very experienced with Javascript, but I'm running into an issue I can't understand. My code is very simple:</p>
  
  <pre><code>document.getElementById ('chat_line_list').addEventListener ("DOMSubtreeModified", LocalMain, false);
  
  function LocalMain ()
  {
      var chatList = document.getElementById('chat_line_list').lastChild.lastElementChild.innerHTML;
      chatList = chatList.replace('InfoThump', '&lt;span class="newemo-1 emoticon"&gt;&lt;/span&gt;');
      chatList = chatList.replace('MuskMelon', '&lt;span class="newemo-2 emoticon"&gt;&lt;/span&gt;');
      chatList = chatList.replace('PoisonApple', '&lt;span class="newemo-3 emoticon"&gt;&lt;/span&gt;');
      chatList = chatList.replace('PoisonBanana', '&lt;span class="newemo-4 emoticon"&gt;&lt;/span&gt;');
      chatList = chatList.replace('PoisonWatermelon', '&lt;span class="newemo-5 emoticon"&gt;&lt;/span&gt;');
      chatList = chatList.replace('PoisonGrape', '&lt;span class="newemo-6 emoticon"&gt;&lt;/span&gt;');
      chatList = chatList.replace('NotNippy', '&lt;span class="newemo-7 emoticon"&gt;&lt;/span&gt;');
      document.getElementById('chat_line_list').lastChild.lastElementChild.innerHTML = chatList;
  }
  </code></pre>
  
  <p>The exception occurs on the last line of the LocalMain() function, when I replace the innerHTML with my newly-modified string. Is there something in this code that causes a loop or overflow?</p>