Creating and Adding content dynamically

Question

I'm creating some ul and span tags dynamically. Now, I'm trying to add content dynamically as well through a click function. The tags gets created inside a ul but the content doesn't get inserted. Here is the code for it:

 <div class="main"></div>
 <div class="content-list"><ul class="information"> </ul></div>

Here's the Javascript with the function and the listener:

var $contentHandler = $(".content-list");
var $mainHandler = $(".main");
var $infoHandler = $(".information");
var circleCounter = 1;

$mainHandler.click(function() {

var htmlString = "<li class='" + circleCounter + "'> <span class='circle-color'> var color = <div class='circle-color-input' contentEditable autocorrect='off'> type a color</div> ; </span> <br> <span class='circle-radius'> This is supposed to change </span> <br> <span class='circle'> This is supposed to change </span> </li>"
$infoHandler.append(htmlString);
updateList();    
circleCounter++;   

});

function updateList() {

    var listItems = $('.information').find('li#' + circleCounter);

    var len = circleCounter;
    for (var i = 0; i < len; i++) {
        //We create one reference. This makes looking for one element more effective. Unless we need to search for a particular element
        var currentItem = circles[i];
        var updateStringRadius = "var radius = " + circleCounter + ";";
        var updateStringCircle = "circle (" + circleCounter + " ," + circleCounter + ", radius)";
        //This is the div Item for the particular div of each element
        var divItem = $(listItems[i]);
        var radiusItem = divItem.find("span.circle-radius");
        var circleItem = divItem.find("span.circle");
        radiusItem.text(updateStringRadius);
        circleItem.text(updateStringCircle);
        // divItem.text(updateString);

        var $circleRadiusHandler = $(".circle-radius");

    }
}

Any suggestions in how to make it work. Here's a JSFiddle for that:

http://jsfiddle.net/mauricioSanchez/wL6Np/1/

Thank you kindly,

Answer 1

You just need to change:

var listItems = $('.information').find('li#' + circleCounter);//this searches by id
//To:
var listItems = $('.information').find('li.' + circleCounter);//this searches by class`

//And remove:

var currentItem = circles[i];

Answer 2

Why are you trying to edit your HTML after you've defined it? Why not use a template like this:

var listItemClass = 'someclass',
    typeOfColor = 'somecolor',
    radiusOne = 'someradius',
    radiusTwo = 'anotherradius';

var listItem = "<li class='{0}'> \
    <span class='circle-color'> var color =  \
        <div class='circle-color-input' contentEditable autocorrect='off'> {1}</div> ;  \
    </span> \
    <br> \
    <span class='circle-radius'>{2}</span> \
    <br> \
    <span class='circle'>{3}</span> \
</li>";

listItem.format(listItemClass, typeOfColor, radiusOne, radiusTwo);

With the following format definition:

String.prototype.format = String.prototype.f = function () {
    var s = this,
        i = arguments.length;

    while (i--) {
        s = s.replace(new RegExp('\\{' + i + '\\}', 'gm'), arguments[i]);
    }
    return s;
};

This way, you don't have to worry about finding certain elements within your predefined structure after the fact. You're just replacing certain parts with whatever you specify.