Create div element in loop in jquery

Question

I am trying to create multiple div element in Jquery. I had tried below solutions.

create html with jquery
Creating a div element in jQuery

I need to create below html element in jquery

<div class="r-c-grid ">
    <div class="r-c-imgmask">
        <img src="http://example.com/images/path.jpg">
    </div>
    <div class="r-c-gradient"></div>
    <h3 class="r-c-grid-title"><a href="http://example.com/link.php">Post Title</a></h3>
</div>

I am able to do this by above solutions but it is more complicated.Can anyone suggest me is there any better way to do this in latest jquery.

Show the code you already have so we can suggest ways to improve it, rather than having to start from scratch. — Anthony Grist, Nov 11 '13 at 12:38
Yes in particular condition I want to append this multiple `r-c-grid` div in my container div. Yes I can achieve this by append as suggested by @Rituraj. But is there any way to do this create dom element and add class and append inner html. — , Nov 11 '13 at 12:44

Rituraj ratan · Answer 1 · 2013-11-11T12:44:27.893

2

var  str='<div class="r-c-grid ">'
        +'<div class="r-c-imgmask">'
         +'   <img src="http://example.com/images/path.jpg">'
        +'</div>'
        +'<div class="r-c-gradient"></div>'
        +'<h3 class="r-c-grid-title"><a href="http://example.com/link.php">Post Title</a></h3>'
    +'</div>';

$(str).appendTo(yourselector);

or can try

$(yourselector).append(str);

SEE DEMO

reference append() and appendTo()

edited Nov 11 '13 at 12:44

answered Nov 11 '13 at 12:38

Rituraj ratan

10,260
8
34
55

why global variable? or you forgot using `var`? – Mr_Green Nov 11 '13 at 12:43
1

FWIW, out of all methods suggested (including mine) this appears to achieve the best performance. This led me to an interesting discovery, though: why is this method (adding lots of pieces of string together) almost twice as fast as adding one unbroken string? See the test here: http://jsperf.com/adding-html-as-string – Ryan Williams Nov 11 '13 at 14:24

score 1 · Accepted Answer · answered Nov 11 '13 at 12:44

1

You can add the whole block in one go as follows:

$('body').append('\
    <div class="r-c-grid "> \
        <div class="r-c-imgmask"> \
            <img src="http://example.com/images/path.jpg"> \
        </div> \
        <div class="r-c-gradient"></div> \
        <h3 class="r-c-grid-title"><a href="http://example.com/link.php">Post Title</a></h3> \
    </div> \
');

Note that the backslashes are needed to break a string like this into multiple lines without causing syntax errors. This effectively comments out the line breaks.

answered Nov 11 '13 at 12:44

Ryan Williams

695
5
11

1

Recently, I had done the same but it didn't work. Now I understood why.. because I wasn't counting the trailing spaces in each line after the code to add the escape character as you did here :D. if there is a space after the escape character then everything mess ups. – Mr_Green Nov 11 '13 at 12:50

score 0 · Answer 3 · answered Nov 11 '13 at 12:38

Simply try this,

$('body').append('<div class="r-c-grid ">
    <div class="r-c-imgmask">
        <img src="http://example.com/images/path.jpg">
    </div>
    <div class="r-c-gradient"></div>
    <h3 class="r-c-grid-title"><a href="http://example.com/link.php">Post Title</a></h3>
</div>');

Or try,

$rci=$('<div class="r-c-imgmask" />')
         .append('<img src="http://example.com/images/path.jpg">');
$rcg=$('<div class="r-c-gradient" />');
$h3=$('<h3 class="r-c-grid-title" />')
         .append('<a href="http://example.com/link.php">Post Title</a>');
$rc=$('<div class="r-c-grid " />').append($rci, $rcg, $h3);
$('body').append($rc);

score 0 · Answer 4 · answered Nov 11 '13 at 12:48

Do you mean something semi-dynamic like this?

function addDiv(parentId, img, link, text){
    var div = '<div class="r-c-grid "><div class="r-c-imgmask">'+
        '<img src="http://example.com/images/'+img+'">'+
        '</div><div class="r-c-gradient"></div>'+
        '<h3 class="r-c-grid-title">'+
        '<a href='+link+'>'+text+'</a></h3></div>';
    document.getElementById(parentId).innerHtml += div;
}

Create div element in loop in jquery

4 Answers4