Add div bloc elements using jQuery

Question

I have an array of JSON object like this :

var array = [
{title : "TEST1", img : "http://www.myTest1.com/test1.jpg"},
{title : "TEST2", img : "http://www.myTest2.com/test2.jpg"},
{title : "TEST3", img : "http://www.myTest3.com/test3.jpg"}
]

I would like to create the following bloc element (using the previous array) and add this bloc into an existing <div id="content"></div> in my webpage :

<div id="line1">

        <div class="item">
            <h2 id="item_text">
                <span>TEST1</span>
            </h2>
            <div class="img-div">
                <img id="item_img" src="http://www.myTest1.com/test1.jpg" alt="" height="333px" width="500px" />
            </div>
        </div>

        <div class="item">
            <h2 id="item_text">
               <span>TEST2</span>
            </h2>
            <div class="img-div">
                 <img id="item_img" src="http://www.myTest2.com/test2.jpg" alt="" height="333px" width="500px" />
            </div>
        </div>

        <div class="item">
            <h2 id="item_text">
               <span>TEST3</span>
            </h2>
            <div class="img-div">
                <img id="item_img" src="http://www.myTest3.com/test3.jpg" alt="" height="333px" width="500px" />
            </div>
        </div>

</div>

How can i do that in Javascript / JQuery ?

What do you want ur result to be? I dont quite understand ur question. — chris97ong, Apr 02 '14 at 12:34
@wawanopoulos this is a pretty basic question, tell us what you've tried and we will help you. — Karl-André Gagnon, Apr 02 '14 at 12:34
I would like to create dynamically the global div element 'line1' from data array and add this created element into an existing one "div id="content" — wawanopoulos, Apr 02 '14 at 12:35
possible duplicate of [Creating a div element in jQuery](http://stackoverflow.com/questions/867916/creating-a-div-element-in-jquery) — epascarello, Apr 02 '14 at 12:38

score 1 · Accepted Answer · answered Apr 02 '14 at 12:41

Try this FIDDLE

Create a model which stores the HTML content to be populated. Iterate over the array and append it.

 var line = $("#line1");
 for (a in array) {
     appendModel(a);
 }

 function appendModel(num) {
     var model = '<div class="item"><h2 id="item_text"><span>' + array[num].title + 
         '</span></h2><div class="img-div"><img id="item_img" src="' + array[num].img + '
     " alt="" height="333px" width="500px" /></div></div>';
     line.append(model);
 }

score 0 · Answer 2 · edited Apr 02 '14 at 12:37

0

This what you are looking for?

var myNewDiv = $("<div></div>");

//append content to myNewD

myNewDiv.appendTo($("#content"))

edited Apr 02 '14 at 12:37

Karl-André Gagnon

33,662
5
50
75

answered Apr 02 '14 at 12:36

Joakim M

1,793
2
14
29

chris97ong · Answer 3 · 2014-04-02T12:46:36.043

0

document.getElementById("line1").innerHTML += "<div id='content'>";

for(var i = 0; i < 3; i++) {
document.getElementById("line1").innerHTML += "<h1>" + array[i].title + "</h1>"
document.getElementById("line1").innerHTML += "<img src='" + array[i].img + "'>";
}

document.getElementById("line1").innerHTML += "</div>";

Fiddle. Hope that helps.

edited Apr 02 '14 at 12:46

answered Apr 02 '14 at 12:38

chris97ong

6,870
7
32
52

score 0 · Answer 4 · answered Apr 02 '14 at 12:41

There is a ; in your array its supposed to be a ,

Use this:

var array = [
{title : "TEST1", img : "http://www.myTest1.com/test1.jpg"},
{title : "TEST2", img : "http://www.myTest2.com/test2.jpg"},
{title : "TEST3", img : "http://www.myTest3.com/test3.jpg"}
]

Then you can do something like this:

var arrayLength = array.length;
var insertHTML = "";
for (var i = 0; i < arrayLength; i++) {
  insertHTML += array[i].title + array[i].img;
}

document.getElementById("youdivID").innerHTML= insertHTML;

Alberto De Caro · Answer 5 · 2014-04-02T12:53:08.747

You can use jQuery.each() to create the html and jQuery.append() function to append it to the target div

var array = [
    {title : "TEST1", img : "http://www.myTest1.com/test1.jpg"},
    {title : "TEST2", img : "http://www.myTest2.com/test2.jpg"},
    {title : "TEST3", img : "http://www.myTest3.com/test3.jpg"}
];

/*
 * put your target div selector here
 * I have simply played with this page elements
 */
var newHtml = '';

    $(array).each(function(index,item){
    newHtml += '<div class="item"><h2 id="'+ item.title +'"><span>'+ item.title +'</span></h2><div class="img-div"><img id="'+ item.img +'" src="'+ item.img +'" alt="" height="333px" width="500px" /></div></div>';
});

$target = $('#question-header').append(newHtml);

Change your loop function parameter positions : `array.forEach(function(item,index){ }` — Zword, Apr 02 '14 at 12:49

score 0 · Answer 6 · answered Apr 02 '14 at 12:43

try :

var array = [
        {title : "TEST1", img : "http://www.myTest1.com/test1.jpg"},
        {title : "TEST2", img : "http://www.myTest2.com/test2.jpg"},
        {title : "TEST3", img : "http://www.myTest3.com/test3.jpg"}
        ]
        function gen(myArray){
            var html = '<div id="line1">'
            for (var i = 0, i < myArray.length; i++){
                html += '<div class="item"><h2 id="item_text"><span>'+myArray[i].title+'</span></h2><div class="img-div"><img id="item_img" src="'+myArray[i].img+'" alt="" height="333px" width="500px" /></div></div>';
            }
            html += '</div>';
            return html;
        }

        var HTML = gen(array);
        $('#content').html(HTML);

Add div bloc elements using jQuery

6 Answers6