Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Move an a href

Hi I would like to loop over some HTML and move a link within each class "contentwrapper" to within the class "head" instead.

Here's an example, this code;

<div class="itembox newtriplebox">
<div class="mainhead"> </div>
<div class="mainbody">
<div class="left">
<div class="head">
<h4>
Some text
<br>
Some more text
</h4>
</div>
<div class="body">
<div class="item">
<div class="contentwrapper">
<a title="" href="/a/link/somewhere">  <---- This is what I would like to move
<div class="promo-head">
<div class="promo-img img">
<img alt="">
</div>
</div>
</a> <---- This is what I would like to move

Should look like this;

<div class="itembox newtriplebox">
<div class="mainhead"> </div>
<div class="mainbody">
<div class="left">
<div class="head">
<a title="" href="/a/link/somewhere">  <---- Moved here
<h4>
Some text
<br>
Some more text
</h4>
</div>
</a> <---- Moved here
<div class="body">
<div class="item">
<div class="contentwrapper">
<div class="promo-head">
<div class="promo-img img">
<img alt="">
</div>
</div>

This content is dynamically created for many objects, so I guess I therefore I need to loop through each block.

Any suggestions is very much appreciated!

Thanks

// Goran

1 Answer

Are you sure that you want to move whole links inside .contentwrapper?

var wholeContentLinks = $('.contentwrapper a');

Do you want to move the first one only?

var firstContentLink = wholeContentLinks[0]; // or
var firstContentLink = $('.contentwrapper a')[0];
$(firstContentLink)
      .prependTo(".head");
//    .appendTo(".head"); to put it at the end of head