Adding another div with jQuery

Question

I'm looping through each relevant tag in an XML file and executing this code.

$('<div class="product_image"></div>').html('<a href="'+url+'"><img src='+urlZoomImage+' /></a>').appendTo('#content');
$('<div class="product_title"></div>').html('<a href="'+url+'">'+title+'</a>').appendTo('#content');

I want to surround product_image and product_title with a div called product_box like this:

<div id="content">
  <div class="product_box">
    <div class="product_image">My image code</div>
    <div class="product_title">My title code</div>
  </div>
</div>

Only the content div is written in the HTML and it must remain like this (I can't write the product_box code in there as it is to be generated on each successful find). How do I do this?

Thanks in advance.

You are appending the elements to #content element, but you have a div element with class of content! typo? — Ram
– Ram, Commented Nov 14, 2012 at 12:26

Riplexus · Accepted Answer · 2012-11-14 13:57:19Z

5

You can easily get lost in code, when you use jQuery for creating HTML elements. Try to save the seperate elements in variables and arrange them after initialising. Like this:

var div_box = $('<div></div>').addClass('product_box');
var div_image = $('<div></div>').addClass('product_image').html('<a href="'+url+'"><img src='+urlZoomImage+' /></a>');
var div_title = $('<div></div>').addClass('product_title').html('<a href="'+url+'">'+title+'</a>');
$('#content').append(div_box.append(div_image).append(div_title));

edited Nov 14, 2012 at 13:57

answered Nov 14, 2012 at 12:20

Riplexus

3401 silver badge10 bronze badges

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

1 Comment

Sara44 Over a year ago

Yes, that's nice thanks. Just edited the last line to make it work: $('#content').append(div_box.append(div_image).append(div_title));

David Thomas · Accepted Answer · 2012-11-14 12:22:36Z

1

Just use the same syntax to create the .product_box: element, and then append the other content to that element, instead of to the #content element.

var product_box = $('<div />', {'class' : 'product_box'}).appendTo('#content');
$('<div class="product_image"></div>').html('<a href="'+url+'"><img src='+urlZoomImage+' /></a>').appendTo(product_box);
$('<div class="product_title"></div>').html('<a href="'+url+'">'+title+'</a>').appendTo(product_box);

answered Nov 14, 2012 at 12:22

David Thomas

254k53 gold badges382 silver badges421 bronze badges

Comments

Jashwant · Accepted Answer · 2012-11-14 12:22:55Z

0

var box = $('<div class="product_box"></div>');
var product_image = $('<div class="product_image"></div>').html('<a href="'+url+'"><img src='+urlZoomImage+' /></a>');
var produc_title = $('<div class="product_title"></div>').html('<a href="'+url+'">'+title+'</a>');

box.append(product_image,product_title).appendTo('.content');

Reference

answered Nov 14, 2012 at 12:22

Jashwant

29.2k16 gold badges76 silver badges110 bronze badges

Collectives™ on Stack Overflow

Adding another div with jQuery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related