adding content using append - Jquery

Question

I am trying to add content (div) after an image using append(). All the list items are dynamically generated, I can only add class to the 'ul'.

Here's the fiddle: http://jsfiddle.net/krish7878/ggyDf/3/

<ul class="footer-8-flickr">
  <li> <a href="#"> <img src="#"></a></li>
  <li> <a href="#"> <img src="#"></a></li>
  <li> <a href="#"> <img src="#"></a></li>
<ul>

$("ul.footer-8-flickr li a img").append("<div class='overlay'><p>Content</p></div>");

May be I am missing something.

Richa · Accepted Answer · 2014-07-30 11:18:22Z

5

Use after instead of append .

Take a look at

Fiddle

<ul class="footer-8-flickr">
    <li> <a href="#"> <img src="#"/></a>
    </li>
    <li> <a href="#"> <img src="#"/></a>
    </li>
    <li> <a href="#"> <img src="#"/></a>
    </li>
    <li> <a href="#"> <img src="#"/></a>
    </li>
    <li> <a href="#"> <img src="#"/></a>
    </li>
    <li> <a href="#"> <img src="#"/></a>
    </li>
    <li> <a href="#"> <img src="#"/></a>
    </li>
    <li> <a href="#"> <img src="#"/></a>
    </li>
</ul>

edited Jul 30, 2014 at 11:18

answered Jul 26, 2014 at 9:47

Richa

3,2992 gold badges30 silver badges51 bronze badges

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

2 Comments

Rahil Wazir Over a year ago

<img> is valid HTML5 closing tag.

chandan Over a year ago

@RahilWazir: Thanks for correcting, even I was a bit confused initially

Arun P Johny · Accepted Answer · 2014-07-26 09:45:12Z

2

You can't insert an element inside an img element, instead you can insert it after the img element as the next sibling

$("ul.footer-8-flickr li a img").after("<div class='overlay'><p>Content</p></div>");

Demo: Fiddle

You can use .after() to do this.

answered Jul 26, 2014 at 9:45

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Comments

Mritunjay · Accepted Answer · 2014-07-26 09:47:03Z

2

You cannot Insert content in an img element.

Try this

$("ul.footer-8-flickr li a").append("<div class='overlay'><p>Content</p></div>");

It'll add div after img tag as a sibling.

answered Jul 26, 2014 at 9:47

Mritunjay

25.9k7 gold badges57 silver badges71 bronze badges

1 Comment

chandan Over a year ago

I wanted it to insert it after img

Rahil Wazir · Accepted Answer · 2014-07-26 09:47:07Z

2

You can't append in img element because it is self closing tag instead append it to a element.

$("ul.footer-8-flickr li a").append("<div class='overlay'><p>Content</p></div>");

answered Jul 26, 2014 at 9:47

Rahil Wazir

10.1k11 gold badges46 silver badges66 bronze badges

Collectives™ on Stack Overflow

adding content using append - Jquery

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related