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.

Answer 1

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>

Answer 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.

Answer 3

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.

Answer 4

你不能追加img元素，因为它是自关闭标签，而不是将其附加到a元素。

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