How to correctly iterate over list items to create html content?

Question

Desired Behaviour

On clicking a button, for each li which contains an image, a function creates and appends divs to a parent div.

The markup for each instance of an li should look like this after running the function:

<div class="recipe_container">
    <div class="recipe_meta">
    <div class="recipe_left_col">
    <div class="recipe_right_col">

Current Behaviour

In the demonstration, which should create two instances of <div class="recipe_container">, the first iteration of the function is producing replica nested divs. The second iteration is creating the correct markup.

It is looking like this:

<div class="recipe_container">
    <div class="recipe_meta">
    <div class="recipe_left_col">
    <div class="recipe_right_col">
    <div class="recipe_meta"> <!--bad-->
    <div class="recipe_left_col"> <!--bad-->
    <div class="recipe_right_col"> <!--bad-->

<div class="recipe_container">
    <div class="recipe_meta">
    <div class="recipe_left_col">
    <div class="recipe_right_col">

Notes

I'm new to creating divs with javascript, so am sure my approach to constructing the function is overly verbose, but i'm just trying to understand the logic first and will make the function more succinct when I have a better understanding of how it operates.

Demonstration

http://jsfiddle.net/rwone/nSws2/

Script

It basically follows the format of:

create element
apply attributes
append it to necessary parent div

Like I said, there must be a more succinct way, but this is all I know at the moment.

function createContent(day, meal, img_src, time) {
    // create recipe container
    var r_container = document.createElement("div");
    r_container.className = "recipe_container";
    // append recipe container
    $("#right_shopping_list_creator").append(r_container);
    // create recipe meta
    var r_meta = document.createElement("div");
    r_meta.className = "recipe_meta";
    // append recipe meta
    $(".recipe_container").append(r_meta);
    // create day paragraph
    var r_day = document.createElement("p");
    r_day.className = "day";
    r_day.innerHTML = day;
    // create meal paragraph
    var r_meal = document.createElement("p");
    r_meal.className = "meal";
    r_meal.innerHTML = meal;
    // append day and meal
    $(".recipe_meta").append(r_day, r_meal);
    // create recipe left col
    var r_left_col = document.createElement("div");
    r_left_col.className = "recipe_left_col";
    // append recipe left col
    $(".recipe_container").append(r_left_col);
    // create image
    var r_image = document.createElement("img");
    r_image.src = img_src;
    // append image
    $(".recipe_left_col").append(r_image);
    // create recipe right col
    var r_right_col = document.createElement("div");
    r_right_col.className = "recipe_right_col";
    // append recipe right col
    $(".recipe_container").append(r_right_col);
    // create time paragraph
    var r_time = document.createElement("p");
    r_time.innerHTML = time;
    // create ingredients paragraph
    var r_ingredients = document.createElement("p");
    r_ingredients.innerHTML = "ingredients";
    // append time and ingredients
    $(".recipe_right_col").append(r_time, r_ingredients);
    // create ul
    var r_ul = document.createElement("ul");
    // append ul
    $(".recipe_right_col").append(r_ul);
    // create directions paragraph
    var r_directions = document.createElement("p");
    r_directions.innerHTML = "directions";
    // append directions paragraph
    $(".recipe_right_col").append(r_directions);
    // create ol
    var r_ol = document.createElement("ol");
    // append ol
    $(".recipe_right_col").append(r_ol);
}
$(document).on("click", "button", function() {
    var day_name = $(".day_name");
    // for each day
    $(day_name).each(function(x, y) {
    var lis = $(y).find("li");
    // for each li (meal)
    $(lis).each(function(i, data) {
        // if li contains an image (meal)
        if ($(data).find('img').length) {
        var img_filename = $(data).find("img").attr("src");
        var testday = "monday";
        var testmeal = "breakfast";
        var testtime = "6:00am";
        createContent(testday, testmeal, img_filename, testtime);
        }
    });
    });
});

It's ok to create documentFragments with $(), e.g., $("<div>"). Much, much easier than DOM methods. — Jared Farrish
– Jared Farrish, Commented Apr 26, 2014 at 12:23

Arun P Johny · Accepted Answer · 2014-04-26 12:23:49Z

1

You need to use the newly created element reference to add new elements to it, instead of running a selector like

function createContent(day, meal, img_src, time) {
    // create recipe container
    var $rc = $('<div />', {
        'class': 'recipe_container'
    }).appendTo('#right_shopping_list_creator')

    // create recipe meta
    var $rmeta = $('<div />', {
        'class': 'recipe_meta'
    }).appendTo($rc)

    // create day paragraph
    var $rday = $('<p />', {
        'class': 'day',
        html: day
    }).appendTo($rmeta)

    // create meal paragraph
    var $rday = $('<p />', {
        'class': 'meal',
        html: meal
    }).appendTo($rmeta)

    // create recipe left col
    var $rlc = $('<div />', {
        'class': 'recipe_left_col'
    }).appendTo($rc)

    // create image
    $('<img />', {
        src: img_src
    }).appendTo($rlc)

    // create recipe right col
    var $rrc = $('<div />', {
        'class': 'recipe_right_col'
    }).appendTo($rc)

    // create time paragraph
    $('<p />', {
        html: time
    }).appendTo($rrc)

    // create ingredients paragraph
    $('<p />', {
        html: 'ingredients'
    }).appendTo($rrc)

    // create ul
    var $rrcul = $('<ul />').appendTo($rrc)

    // create directions paragraph
    $('<p />', {
        html: 'directions'
    }).appendTo($rrc)

    // create ol
    var $rrcol = $('<ul />').appendTo($rrc)
}

Demo: Fiddle

answered Apr 26, 2014 at 12:23

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

1 Comment

user1063287 Over a year ago

Thank You. A lot cleaner and intuitive and does the job.

Collectives™ on Stack Overflow

How to correctly iterate over list items to create html content?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related