Strategy to sort html content for writing

I've got a general question about a strategy for sorting html elements. Here's the prereqs:

I'm dynamically building content that will get written to an HTML file. This content is written to a string that will subsequently be saved to the body of an html file. The content consists of a hierarchical representation of ul and li tags, for example (coded here with spaces and on separa开发者_开发问答te lines for clarity)

var mText = "<ul>";
mText += "<li class='folder'>folder 1";
mText += "   <ul>";
mText += "      <li class='page'>page 3</li>";
mText += "      <li class='page'>page 2</li>";
mText += "      <li class='folder'>sub folder 2";
mText += "         <ul>";
mText += "            <li class='page'>sub page 3</li>";
mText += "            <li class='page'>sub page 1</li>";
mText += "         </ul>";
mText += "      </li>";
mText += "      <li class='folder'>sub folder 1";
mText += "         <ul>";
mText += "            <li class='page'>sub page 5</li>";
mText += "            <li class='page'>sub page 4</li>";
mText += "         </ul>";
mText += "      </li>";
mText += "   </ul>";
mText += "</li>";
mText += "</ul>";

So I end up with a string representation of the elements I want to write (consider that pseudo-code if you find typos or other discrepancies). There may be more levels in the hierarchy.

Now, I need to sort that, by folder name, or file name, or both. This string is constructed from a hierarchy (a linked list) of objects (associative arrays) so sorting before converting that structure to text presents similar issues... and I am trying to figure out whether or not it would be easier to sort before conversion to the string or after.

How would I go about doing that as is? convert that to a multi-dimensional array, sort the array and then convert back to a string representation? Or is there some way I could sort the contents of the string?

I'm no novice to javascript, and understand sorting - that's no problem - but I'm just looking for general directions, and thanks for your ideas!

---

I would definitely go with sorting the arrays prior to string conversion. Performance will be much better as sorting an array of objects is much lighter than rearranging the contents of a string (especially a very large string).

Also just as an aside when you are doing a large amount string concatenation operations you should use the array method:

var mText = new Array();
mText.push("<li class='folder'>folder 1");
mText.push("   <ul>");
mText.push("      <li class='page'>page 3</li>");
mText.push("      <li class='page'>page 2</li>");
mText.push("      <li class='folder'>sub folder 2");
mText.push("         <ul>");
mText.push("            <li class='page'>sub page 3</li>");
mText.push("            <li class='page'>sub page 1</li>");
mText.push("         </ul>");
mText.push("      </li>";");
mText.push("      <li class='folder'>sub folder 1");
mText.push("         <ul>");
mText.push("            <li class='page'>sub page 5</li>");
mText.push("            <li class='page'>sub page 4</li>");
mText.push("         </ul>");
mText.push("      </li>");
mText.push("   </ul>");
mText.push("</li>");
mText.push("</ul>");

//this will create the final string
return mText.join("");

This will be much faster than the "+=" method in most cases.

---

can you use the DOM methods such as document.CreateElement instead of creating the string manually? I think that would make it much easier to sort.