Iterate through an JavaScript object and display in html body

Question

I'v been researching this for quite a while. My question is how can I get this loop to print to the body of an html page? I can console.log it and it displays key and property in the console, but for the life of me I can find no documentation to write it to the body of my html page. The "google" has found me mostly all pages that demonstrate iterating through this object and then a console.log. I would like to print it out as html. Any help is most appreciated.

      var recipies = {

        title: "Pizza"
        , servings: 8
        , ingredients: ['Pepperoni', 'Cheese', 'Mushrooms']

    };


    /* iterate through the object and display the recipe */


    sabio.page.iterateDisplay = function (i) {

        for (var i in recipies) {
            $("body").html("<hr /><br />");
            console.log(i.toUpperCase() + ':', recipies[i]);
        }

    }

    sabio.page.iterateDisplay(recipies);

</script>

Answer 1

append() is your friend.

sabio.page.iterateDisplay = function (i) {

    for (var i in recipies) {
        $("body").append("<hr /><br />");
        $("body").append(i.toUpperCase() + ':'+ recipies[i]);
    }

}