title: innerHTML: How To Avoid
body: <p>I'm writing a plugin which will convert emoticons to images in a text block for a particular site.  The easy answer is to use regular expressions to detect the trigger text on the innerHTML and insert the img tag, then pipe the string back to the dom element in the <em>innerHTML</em> part.  The DOM element block may already have anchor <code>&lt;a&gt;</code> and/or text formatting <code>&lt;b&gt;,&lt;i&gt;,&lt;u&gt;</code> in the innerHTML part.</p>
  
  <p>For example </p>
  
  <pre><code>    var textBlock = pItems[i].innerHTML;
      var kissSource = 'https://mail.google.com/mail/e/35D';
      textBlock = textBlock.replace(/(^|[^&amp;lt;]|[^&amp;gt;]):\*/g, "&lt;img class='emoticon' src='" + kissSource + "' /&gt;");
   --&gt;      pItems[i].innerHTML = textBlock;  //&lt;-can I avoid this to be in compliance with Mozilla addons reqmnts
  </code></pre>
  
  <p>I searched for quite a few hours on how I might convert a DOM (or HTML string) to XML (I know: HTML!=XLM <a href="https://stackoverflow.com/questions/5472162/how-to-read-html-as-xml">How to read HTML as XML?</a> but perhaps a portion of a div?)  which in turn could be converted to JSON who in turn .. could be converted back into a DOM following: 
  <a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/DOM_Building_and_HTML_Insertion?redirectlocale=en-US&amp;redirectslug=XUL_School%2FDOM_Building_and_HTML_Insertion#JSON_Templating" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/DOM_Building_and_HTML_Insertion?redirectlocale=en-US&amp;redirectslug=XUL_School%2FDOM_Building_and_HTML_Insertion#JSON_Templating</a></p>
  
  <p>I do not know jQuery, so please if it is possible with javascript that would be ideal.</p>
  
  <p>Should I be solving this problem without running the regular expression against the innerHTML thus avoiding the problme?</p>
  
  <p>Thanks so much, JennaS</p>