0

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.

Improve this question
4
  • 1
    Show the code you already have so we can suggest ways to improve it, rather than having to start from scratch. Commented Nov 11, 2013 at 12:38
  • Just wrap the HTML code in $( ).. Commented Nov 11, 2013 at 12:40
  • I presume that you need it dynamic, right? Commented Nov 11, 2013 at 12:40
  • 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. Commented Nov 11, 2013 at 12:44

4 Answers 4

Reset to default
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()

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

why global variable? or you forgot using var?
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: jsperf.com/adding-html-as-string
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.

Improve this answer

1 Comment

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.
0

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);
Improve this answer

Comments

0

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;
}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.