2

I am new to jQuery and trying to inject the HTML content of one <div> into another <div>. This is the code I'm using:

<div class="relatedItems"> </div>

<script>
    jQuery.noConflict();
    jQuery(document).ready(function() {
        var related = jQuery("div.itemRelated").html();   
        jQuery("div.relatedItems").html("<div class='itemRelated'>" + related + "</div>");  
    });
</script>

The problem is that the injected HTML is not formatted the same way as the original.

I would love to post an image but can't because I'm a new user

Any ideas if I'm missing anything?

Colin Brock
  • 21,267
  • 9
  • 46
  • 61
Eyal Kattan
  • 31
  • 1
  • 3
  • take a screen shot, upload it to your server, and give the URL to us via your post, or comment. – chris Feb 04 '12 at 21:21
  • If there is CSS that is controlling the formatting that specifies any of the parents of the original `.itemRelated` object, then that CSS might not work the same after you move the content. Post your CSS into your question and we can take a look. – jfriend00 Feb 04 '12 at 21:24

3 Answers3

2

This is not the ideal way to copy HTML elements. For the full reason, see my answer to Why should y.innerHTML = x.innerHTML; be avoided?. jQuery can handle this for you in a much more elegant way:

var related = jQuery('div.itemRelated')
    .clone(true, true);
jQuery('div.relatedItems').html(related);

This may fix some of your problems, particularly those relating to event handlers. If the styling isn't right, however, you have some specific styling rules that you need to tweak. Use a DOM inspector like the Chrome console or Firebug to examine the relevant elements to see which style are/are not being applied.

Community
  • 1
  • 1
lonesomeday
  • 233,373
  • 50
  • 316
  • 318
  • Tried that to no success. I inspected both objects on Google's chrome and the html seem to be exactly the same. Here is a link to an image showing the issue... maybe this will give you a better idea: http://eyalkattan.com/images/sample2.jpg – Eyal Kattan Feb 04 '12 at 22:15
  • @Eyal Not just the HTML. There is a pane that says what styles an element has. See which look wrong. – lonesomeday Feb 04 '12 at 22:18
  • My apologies, I should have stated that. I examined both the objects the the (right) pane that shows the styles. The correct styles are used. – Eyal Kattan Feb 04 '12 at 22:20
  • Found the issue... it was an IMG property inherited from the master template CSS. thank you all for your directions it really helped :) – Eyal Kattan Feb 04 '12 at 22:44
0

You can use clone instead:

jQuery(document).ready(function() {
    jQuery("div.relatedItems").html(jQuery("div.itemRelated:first").clone());  
});
ori
  • 7,817
  • 1
  • 27
  • 31
0

You are using the text of an element to attempt to reflect it's current state of appearance, but you are only using the inner element. The most likely causes for the problem you describe are:

  1. the 'div.itemRelated' element has a style attribute that is not being considered
  2. the 'div.itemRelated' element has style effects that are being applied because it's parent has applied styles.

To try and solve the first one:

jQuery.noConflict();
jQuery(document).ready(function(){
  related = jQuery('div.itemRelated').clone();
  jQuery('div.relatedItems').append(related);
});

The second possibility could be discovered by cloning the element into the current elements parent. If the style is correct in the same parent but incorrect in the new parent (relatedItems) then the styles are being supplied by a hierarchical selector and some CSS tweaks will need to be made.

As a general rule you will want to include CSS info when requesting help with a style issue.

Gabriel
  • 18,322
  • 2
  • 37
  • 44