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,

also i think in listItems you're looking for id's when you created li's with classes — rod_torres
– rod_torres, Commented Apr 24, 2014 at 19:17
@rod_torres That was a mistake but it isn't used. got rid of it. And yes! I was looking for an id not for a class. That solved it — mauricioSanchez
– mauricioSanchez, Commented Apr 24, 2014 at 19:23

juvian · Accepted Answer · 2014-04-24 19:18:06Z

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];

answered Apr 24, 2014 at 19:18

juvian

16.1k2 gold badges42 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mauricioSanchez Over a year ago

Noob mistake! Thanks so much!

Anthony · Accepted Answer · 2014-04-24 19:35:13Z

1

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.

answered Apr 24, 2014 at 19:35

Anthony

9767 silver badges15 bronze badges

2 Comments

mauricioSanchez Over a year ago

That's just something that I summed up in order to post here. But really that html is connected to the position and radius of some <circle> that are also created dynamically, hence I need to create the elements at the same time, plus the content of the radius and the x and y position changes in the tags when the circles are modified. Your code looks very cool, I don't know if it addresses what I'm trying to do specifically.

mauricioSanchez Over a year ago

Actually I think this my work as well. I had to wrap my head around it for a bit. The first elements will have to be String() since they are always changing, but an interesting and different approach

Collectives™ on Stack Overflow

Creating and Adding content dynamically

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related