jQuery append html error

Question

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

Which browser and what's the doctype? jQuery interprets your .append() parameter to create DOM nodes, not markup. — Emyr
– Emyr, Commented Mar 3, 2012 at 1:12
don't be mislead by what browser does in console with closing image tags...it's up to browser how they get handled. jQuery is cross browser compliant — charlietfl
– charlietfl, Commented Mar 3, 2012 at 1:17
@tq: DOM nodes are not markup. Markup is text. The markup text is interpreted to create DOM nodes, which (when in a JavaScript environment) are JavaScript host objects. — user1106925
– user1106925, Commented Mar 3, 2012 at 1:22

score 2 · Accepted Answer · 2012-03-03 01:36:44Z

2

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.

edited Mar 3, 2012 at 1:36

answered Mar 3, 2012 at 1:15

user1106925

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

2 Comments

joakimdahlstrom Over a year ago

but why wouldn't it display the img node as closed, even if it's just an interpretation?

user1106925 Over a year ago

@joakimdahlstrom: Because the /> requirement is specific to XHTML. Elements like <img> that don't allow content do not actually need the / at all. It's just that XHTML artificially mandates it for validation. Just like in most cases quotation marks are not actually required for attribute values, but XHTML requires them. So the browser chooses to render the HTML in a non XHTML compliant manner.

Karol May · Accepted Answer · 2012-03-03 01:18:06Z

0

use prepend

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

answered Mar 3, 2012 at 1:18

Karol May

3113 silver badges16 bronze badges

1 Comment

joakimdahlstrom Over a year ago

prepend is the same as append, but differs in where the dom node is placed.

Collectives™ on Stack Overflow

jQuery append html error

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related