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);
        }
    });
    });
});

Answer 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