A better way to read text files into html?

Question

Currently I'm making a website that has a to-do list that will probably become quite long to write in html. So I decided to make a shorter version for me to write that I find more comfortable to read.

What I am currently doing is using ajax to read the text file from the server. Once the file has been stored into a string, it's sent to a function which formats it correctly for html. After that, it's returned into a variable that is now stored into a container div using jquery div.

This is my javascript code:

var todoListMake = function( reading ){
        var wanted =reading.split("\n");
        var newString = "";
        for( var i = 0; i < wanted.length; i ++ )
        {
            if( wanted[i] === "\n" )
                continue;
            /* Place text formatting code below */
            wanted[i] = wanted[i].replace("<b>","<strong>");
            wanted[i] = wanted[i].replace("</b>","</strong>");
            wanted[i] = wanted[i].replace("<c>","<span class=\"cutWord\">");
            wanted[i] = wanted[i].replace("</c>","</span>");

            if( wanted[i].search("[X]") != -1 )
            {
                wanted[i] = "<span class=\"workDone\">" + wanted[i].replace("[X]","") + "</span>";
            }

            if( wanted[i].search("<ul") === -1 && wanted[i].search("</ul") === -1 )
                wanted[i] = "<li>" + wanted[i]; // Open the list if no ul tags

            if (i === (wanted.length-1) )
            {
                newString += wanted[i];
                break;
            }// Break early because the rest cannot be processed correctly

            if( wanted[i].search("</ul") != -1 )
                wanted[i] += "</li>"; // Close the list at the end of each ul

            if ( wanted[i + 1].search("</ul") != -1 )
                wanted[i] += "</li>";// Close the list of regular data

            //alert(wanted[i]);
            newString += wanted[i];
        }
        return newString;

};

window.onload = function(){
        $.get("textData/todoData.txt", function(data) {


 var compiledData = todoListMake( data );
            $("#todoList").append( compiledData );
        });
    };

And then read from the text file like this:

<ul  id="todoList" class="workList">
    <h2>Release 1:</h2> <span class="important"> Completed </span>

    <h2>Release 2: <span class="important"> Current Version </span></h2>
        <ul>    
            <b>Core Additions</b>
            <ul>
                [X] Save Progress
                [X] <c>14</c> 9 New Levels
            </ul> 

            <b>Programmers Check List</b>
                <ul>
                    [X] Add functionality to Level Restart
                    [X] Add checkpoint floater
                </ul> 

            <b>Bug Fixes</b>
                <ul>
                    [X] Hanging on Slopes teleport you
                    [X] Hanging on Slopes froze the game
                    [X] Fixed Menu overlay problem
                </ul>
        </ul>
</ul>

Answer 1

What do you mean with the variable name wanted? I don't understand what it has anything to do with what you are doing, so it's a badly chosen name.

if( wanted[i] === "\n" )
    continue;

This won't do anything. Since you split by "\n", there will be no line breaks leftover. I assume you want wanted[i] === "". Also consider .trim()ing all you lines, otherwise a stray white space will break this.

if (i === (wanted.length-1) )
    {
        // [...]
        break;
    }// Break early because the rest cannot be processed correctly

I'm not sure why you are "breaking early" here. Your condition triggers for the last line, so it's not really "early".

newString += wanted[i];

Repeated string concatenation is a slow process and uses a lot of memory. Instead just leave your strings in the array and at the end just return wanted.join();

EDIT: One more thing: Both the original div and the other ul you later add inside have the same id. That's invalid.

EDIT: Regarding the ID: In your script you have $("#todoList").append( compiledData ); so there's obviouly an element with the id todoList, but your template has the code <ul id="todoList" class="workList"> in it, so you are creating a second element with the same ID.