how to add a img tag to an anchor tag in jquery

Question

I am trying to add an image to my anchor tag in jquery,but the image seems to be broken.

what i tried/tested:

• the path of the image is correct

• did a test and added it into html and the image shows.

  <div><img src="~/ClientData/10000/Styles/images/menu.png"/></div> // just a test.image works in html

i am trying to add it to the following

 $('#navbar-collapse-menu li:eq(0)').after('<li  style="background: linear-gradient(to bottom,#fcd18b 0,#faa61d 100%)"><a id="Menu" href="http://test.aspx"><img src="~/ClientData/10000/Styles/images/menu.png"/>Menu</a></li>'); // the image gets broken in here.

is there a different way i can add the image to the above code?

Answer 1

You can only put block-level elements inside anchor elements with HTML5 and browser support is still a bit iffy on it. IE7 obviously does not support this.

You can take reference of following code and put it as your need into your jquery code above. But be sure that you jquery code is error free.

<div>                      
   <a title="X" href="http://google.com" target="_blank">
      <img src="Images/X.png"/> 
   </a>  
</div>

Check w3shcool Example at here.