Replace the contents of a div with the contents of another jQuery div

Question

I would like to replace the contents of a div with the contents of another div (which is hidden with css) by clicking on the image. However, using several of the methods suggested here, I cannot get it to work.

my code is below:

HTML

<h3>Recent Callaborations</h3> <div id="collaborations"> <img class="rec1" src="http://domain.com/michaelscott/wp-content/uploads/2013/02/url.png"/> <div id="rec1">Some image caption that is hidden now and that will replace what is in the rec div below</div> </div> <div id="rec-box" class="rec"> this is the content that is to be replaced </div> 

Js

 jQuery(document).ready(function() { jQuery(".rec1").click(function(event) { event.preventDefault() jQuery('#rec-box').html($(this).next('#rec1')[0].outerHTML); }); }); 

CSS

 #collaborations { width: 100%; margin:0 0 10px 0; padding:0; } #collaborations img { display:inline-block; } .rec { background: #EDEDED; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; padding: 10px; } #rec1, #rec2, #rec3, #rec4 { display:none; } 

Answer 1

You just need to set the html() correct div . Try the following:

 jQuery(document).ready(function() { jQuery(".rec1").click(function(event) { event.preventDefault() jQuery('#rec-box').html(jQuery(this).next().html()); }); }); 

Answer 2

 jQuery(document).ready(function() { jQuery(".rec1").click(function(event) { event.preventDefault() jQuery('#rec-box').html(jQuery("#rec1").html()); }); }); 

Answer 3

The source code seems unsuccessful because you grab the entire hidden element, not just its contents, using the outerHTML property (and not innerHTML ). This means that the recently copied content still has <div id='rec1'...> and is still hidden as a result of the css rule.

The jQuery html method can get and set innerHTML , so here is the correct method.

 $(document).ready(function () { $(".rec1").click(function (event) { event.preventDefault(); $('#rec-box').html($('#rec1').html()); //replaces with contents of #rec1 }); }); 

Answer 4

I would prefer the following solution :) I hope it helps

HTML

 <h3>Recent Callaborations</h3> <div id="collaborations"> <a href="#rec1" class="switchContent"><img class="rec1" src="http://cmagics.eu/michaelscott/wp-content/uploads/2013/02/url.png"/></a> <div id="rec1">Some image caption that is hidden now and that will replace what is in the rec div below</div> </div> <div id="rec-box" class="rec"> this is the content that is to be replaced </div> 

Javascript

 $(document).ready(function() { switchContent = function(ev) { var el = $($(this).attr('href')); if(el.length == 1) { $('#rec-box').html(el.html()); } ev.preventDefault(); }; $('.switchContent').on('click',switchContent); }); 

Answer 5

You need to get $("#rec").contents() and .clone() it

You need .append() it in $('#rect-box') after .empty() it

 jQuery(function($) { $(".rec1").on('click',function(event) { event.preventDefault(); $('#rec-box').empty().append(($('#rec1').contents().clone()); }); });