如何使用jquery和javascript更改div的内容？

Question

I am pretty new to javascript and jquery. I am trying to rotate the contents of 2 div's located within a wrapper div. One div contains a photo and the other some styled text (h1, h3, p, span). It is a gallery of 4 surf boards and there are 4 photos and 4 descriptions. I have been trying to rotate the contents of the div's when the links are clicked. The div that contains the photos rotates fine. I can get one description in the text div(currentBoard) to rotate but after that the only thing that will change are the photos and the description stays static on the first one that was clicked. Since the div containing the text has a class already applied I am using the id to rotate the contents. The actual contents for this div are in the css using :after and :before and as the id's change for this div I am trying to apply the contents to be that of the new id. I just cannot get the text contents div to rotate in sync with the photos div. The code below is what I have now and I have tried many things already. currentBoard is the id in the text div I would like to change. I am assuming I need to somehow remove the old id first then add in the new one but everything I have tried has failed. Any help is greatly appreciated. Thanks!

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(evt) {
$("a:has(img.boardGallery)").click(function() {
var largePath = $(this).attr("href");
var caption = $(this).attr("id");
var currentBoard = $("#currentBoard");    
currentBoard.attr({ id: caption });
$("#photo_large").attr({ src: largePath });
return false;       
}); 
}); 
</script>

Answer 1

Switching an ID will not change the content of a div.
If you want to change what is displayed in a div, you should just write a new value into the inner html.

Here is a link to a question showing how that is done: How to replace innerHTML of a div using jQuery?

If you want to have one div disappear and another show up, you should do this with CSS properties and change the 'display' property. You can do this with Show() and Hide() in jQuery. Here is a link to a question showing how to do this: jquery show/hide div