Using jquery to add html depending on other html

Question

I have some code as below

<div class="box coursebox">
  <h3 class="main"><a title="GCSE English" href="http://vle.sheffcol.ac.uk/moodle/course/view.php?id=1656">GCSE English</a> </h3>
</div>
<div class="box coursebox">
  <h3 class="main"> <a title="GCSE Maths" href="http://vle.sheffcol.ac.uk/moodle/course/view.php?id=1526">GCSE Maths</a> </h3>
  <div class="assign overview">
     <div class="name"> Assignment: <a title="Assignment" href="http://vle.sheffcol.ac.uk/moodle/mod/assign/view.php?id=59691">Algebra assignment 1</a> </div>
     <div class="name"> Assignment: <a title="Assignment" href="http://vle.sheffcol.ac.uk/moodle/mod/assign/view.php?id=59691">Algebra assignment 1</a> </div>
  </div>
</div>

What I want to do it use jquery to add the following bit of HTML

<span class="button" id="button">Show activities</span>

to each coursebox after the H3 tag IF there is a div.overview as a child.

Firstly, is this possible, and if so how?

Thanks

Kieran

Rory McCrossan · Accepted Answer · 2012-09-27 08:11:54Z

4

Yes it's possible, try this:

$(".coursebox").has("div.overview").each(function() {
    $("h3", $(this)).after("<span class=\"button\" id=\"button\">Show activities</span>");
});

Example fiddle

answered Sep 27, 2012 at 8:11

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

Comments

Anton Baksheiev · Accepted Answer · 2012-09-27 08:21:19Z

0

Try this solution

$(".coursebox").has("div.overview").each(function(){
  var $span = $("<span>")
      .addClass('button')
      .attr('id','button')
      .text('Show activities');

    $span.insertAfter($(this).find('H3.main'))

});

answered Sep 27, 2012 at 8:21

Anton Baksheiev

2,2612 gold badges15 silver badges15 bronze badges

Comments

Asciiom · Accepted Answer · 2012-09-27 09:17:10Z

0

var spanEl = $('<span/>', {
 id: "button",
 class: "button",
 text: "Show activities"
});
$("h3", $(this)).after(spanEl);

edited Sep 27, 2012 at 9:17

Asciiom

9,9757 gold badges42 silver badges59 bronze badges

answered Sep 27, 2012 at 8:21

user3266190

Collectives™ on Stack Overflow

Using jquery to add html depending on other html

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related