CODEWITHSUNDEEP
javascriptjqueryappend
alesko007
alesko007

Reputation: 219

Appending to a tag

I want to append data I fetched from server to a div tag, but I can't get it to work. That's HTML with a div tag to which I'd like to append data from the JS code.

HTML:

<body onload="initialize()">
<div id="text"></div>
</body>

And here is JavaScript code. I would like to replace document.write with a function that will append data to a div tag.

JS:

function initialize() {
$.getJSON('http://www.wawhost.com/izdelava-mobilne-aplikacije-2-del/fetch.php?callback=?', function (data) {
    for (var i = 0; i < data.length; i++) {
        document.write('<img src="' + data[i].image + '" />' + data[i].title + data[i].description + '<br>');
    }
});
}

Fiddle: http://jsfiddle.net/GDxtf/

I just started learning JavaScript. Help will be greatly appreciated :)

Upvotes: 0

Views: 470

Answers (1)

Robin van Baalen
Robin van Baalen

Reputation: 3651

Paste this code in the bottom of your HTML document, right before </body>:

<script>
// If you're not using an HTML5 doctype, use <script type="text/javascript> instead of just <script>

$(function () {

    $targetDiv = $("#text");
    $.getJSON('http://www.wawhost.com/izdelava-mobilne-aplikacije-2-del/fetch.php?callback=?', function (data) {
        for (var i = 0; i < data.length; i++) {
            var $div = $("<div />");
            var $img = $("<img />");

            $img.attr("src", data[i].image);
            $img.appendTo($div);

            var $title = $("<h2>" + data[i].title + "</h2>");
            $title.appendTo($div);

            var $description = $("<p>" + data[i].description + "</p>");
            $description.appendTo($div);

            $div.appendTo($targetDiv);
        }
    });
});
</script>

Did this solve your problem?

Upvotes: 1

Related Questions