Pushing/Creating elements dynamically in jQuery and then immediately looping through to append HTML

Question

I'm trying to define an area in a jQuery snippet that is easy for a user to alter. The end goal is the user defines the values, but the jQuery will create the objects from the list.

I start with this simple HTML div:

<div class="slider-container"></div>

Followed by the js concept:

var newSlides = [];
$(".slider-container").each(function(){
    newSlides.push({
        image: {
            url:       "http://placekitten.com/960/400",
            title:     "Sample Title 1",
            subtitle:  "Sample Subtitle 1"
        },
        image: {
            url:       "http://placekitten.com/961/401",
            title:     "Sample title 2" 
        };
    });
});

I would like it to be able to then take these values and do something like:

var index = 1;
$("slider-container").append(
    $("<div/>", {class: "slide s-" + index++})
        .append($("<img/>, {src: "url-from-above"}))
        .append($("<div/>, {class: "slide-titles"})
            .append($("<h2/>, {class: "title").text("text-from-above))
            .append($("<h3/>, {class: "subtitle").text("text-from-above))))

So that the final result would be:

<div class="slider-container">
    <div class="slide s-1">
        <img src="http://placekitten.com/960/400 />
        <div class="slide-titles">
            <h2>Sample Title 1</h2>
            <h3>Sample Subtitle 1</h3>
        </div>
    </div>
    <div class="slide s-2">
        <img src="http://placekitten.com/961/401" />
        <div class="slide-titles">
            <h2>Sample Title 2</h2>
        </div>
    </div>
</div>

The goal being a user just has to define values and not have to worry about defining the HTML or putting things in the correct places. Easy to edit for anyone.

So what is the question then?

gdoron
– gdoron

2013-06-20 18:39:25 +00:00
Commented Jun 20, 2013 at 18:39 — gdoron
– gdoron, Commented Jun 20, 2013 at 18:39
I would consider using some type of templating engine.

Brad M
– Brad M

2013-06-20 18:39:48 +00:00
Commented Jun 20, 2013 at 18:39 — Brad M
– Brad M, Commented Jun 20, 2013 at 18:39
e.g. handlebarsjs.com or mustache.github.io

Thomas Junk
– Thomas Junk

2013-06-20 18:58:13 +00:00
Commented Jun 20, 2013 at 18:58 — Thomas Junk
– Thomas Junk, Commented Jun 20, 2013 at 18:58

ponysmith · Accepted Answer · 2013-06-20 19:13:10Z

1

I agree with others that a templating engine like Mustache would be useful. If you just want to do it with straight jQuery though:

for(i=0; i<newSlides.length; i++) {
    var slider = $('.slider-container');
    var slide_data = newSlides[i];
    var slide = $('<div class="slide s-' + i + '"/>').appendTo(slider);
    $('<img src="' + slide_data.url + '" />').appendTo(slide);
    var titles = $('<div class="slide-titles"/>').appendTo(slide);
    if(slide_data.title) {
        $('<h2>' + slide_data.title + '</h2>').appendTo(titles);
    }
    if(slide_data.subtitle) {
        $('<h3>' + slide_data.subtitle + '</h3>').appendTo(titles);
    }
}

For the code above, you'll need to modify your push() statement so that it pushes the objects into the array directly instead of pushing an object comprised of your target objects. E.g.

var newSlides = [];
newSlides.push(
    {
        url:       "http://placekitten.com/960/400",
        title:     "Sample Title 1",
        subtitle:  "Sample Subtitle 1"
    },
    {
        url:       "http://placekitten.com/961/401",
        title:     "Sample title 2" 
    }
);

answered Jun 20, 2013 at 19:13

ponysmith

4272 silver badges4 bronze badges

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

2 Comments

o_O Over a year ago

Perfect. The reason I can't use a templating engine at the moment is I'm tasked with making it as lightweight as possible with ease of implementing it in several different projects. So this is great imo. Thanks.

Pointy Over a year ago

@o_O The doT.js template engine is just slightly over 100 lines of code, uncompressed. A template engine is not an expensive proposition.

Collectives™ on Stack Overflow

Pushing/Creating elements dynamically in jQuery and then immediately looping through to append HTML

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related