CODEWITHSUNDEEP
jquery
sveatch42
sveatch42

Reputation: 689

jQuery append html error

I am attempting to add an image to each save button on the page.

The jQuery I am using is this:

$("div.save-to-button").append
('<img class="saveToDropDownIcon" src="../../Content/Images/downTriangleIcon.png"
alt="V" />');

The jQuery statement above produces this html:

<div class="save-to-button" 
title="Save this recipe to the shopping list or a meal plan."> Save To 
<img class="saveToDropDownIcon" src="../../Content/Images/downTriangleIcon.png"
alt="V"></div>

As you can see, the html sent to the append method closes the img tag correctly, but the resulting html does not close the img tag.

I have also tried

$("div.save-to-button").append('<img class="saveToDropDownIcon" 
src="../../Content/Images/downTriangleIcon.png" alt="V" ></img>');

Which produced the same result.

Could someone please point out what I am doing wrong.

Thanks, Scott

Upvotes: 0

Views: 2949

Answers (2)

user1106925
user1106925

Reputation:

It doesn't close the <img> tag at all. It discards your HTML after converting it to DOM elements.

What you're seeing is the browser's interpretation of what the HTML would look like if it was still HTML. It gets to choose for itself how it looks, which may be entirely different from the original HTML.

Remember that in the browser there is no HTML. There's only the DOM and its API, which is capable of analyzing the DOM and generating its interpretation of an HTML string from it.

To be clear, there is no general requirement for /> in elements that do not allow content, like <img>. That's a restraint specific to XHTML. Doing <img ... > is perfectly valid, unless prohibited by your DOCTYPE.

Upvotes: 2

Karol May
Karol May

Reputation: 291

use prepend

 $("div.save-to-button").prepend('<img class="saveToDropDownIcon" src="../../Conten/Images/downTriangleIcon.png"alt="V" />');

Upvotes: 0

Related Questions