title: In this situation, is there any advantage of using fragments over html strings?
body: <p>I'm coding a chat application, and it's gotten a bit more complex, since I want it to have features such as delivery confirmation, message caching and so on.</p>
  
  <p>Right now, the way I'm handling message caching is:</p>
  
  <ol>
  <li><p>User clicks conversation</p></li>
  <li><p>First batch of messages fetched from the server is stored in a "chunk", inside of an array.</p></li>
  <li>Each chunk is a document fragment with <em>n</em> number of messages (DOM elements) appended to it.</li>
  <li>When the user scrolls up, more chunks (fragments) are added to the array, as they are fetched from the server.</li>
  <li>When the user goes to another conversation, but then decides to load a previously loaded conversation, the script appends all fragments into a single one, and the big fragment is appended into the messages window.</li>
  </ol>
  
  <p>This is how an array with message "chunks" would look like if the user has already fetched plenty of messages:</p>
  
  <pre><code>conversation[2].chunks = [
      #document-fragment,
      #document-fragment,
      #document-fragment
  ];
  </code></pre>
  
  <p>Each fragment has about 10 messages appended inside.</p>
  
  <p>Before using fragments, I was using strings, by getting the HTML representation of each message. Something like this:</p>
  
  <pre><code>conversation[2].chunks = [
      '&lt;span class="msg"&gt;Hey&lt;/span&gt;&lt;span class="msg"&gt;Hey&lt;/span&gt;...',
      '&lt;span class="msg"&gt;Bla&lt;/span&gt;&lt;span class="msg"&gt;bla&lt;/span&gt;...'
  ];
  </code></pre>
  
  <p>I decided to use fragments since I found manipulating each message easier (by doing stuff like fragment.getElementById), versus having to use innerHTML to parse the strings and manipulate the elements. </p>
  
  <p>However, I'm now questioning whether it was the right choice, since I don't know if keeping fragments inside of an array is actually memory-intensive, or at least more memory-intensive than strings.
  The other downside is that now, if I want to store the fragments in <code>localStorage</code>, I'd have to convert each fragment's content to HTML strings, and when I want to use <code>localStorage</code> along with my fragment system, I'd have to convert each HTML string back to document fragments.</p>
  
  <p>Using fragments seemed more natural, but now I'm thinking of going back to  keeping the HTML strings. It's a bit of work, though, since I don't have the old code anymore.</p>
  
  <p>Is there any advantage of using fragments over HTML strings in this case?</p>
  
  <p>Thank you.</p>