Why is JQuery breaking my HTML, adding extra <a> tags?

Question

I have the following HTML code stored in a javascript string: and I am using Jquery 1.6.1 from google CDN

console.log(string):

<a><div class='product-autocomplete-result'>
            <div class='cell img'>
              <img src='http://beta.prizzm.com.s3.amazonaws.com/uploads/product_image/image/1/thumb_serrano_navy_1.jpg'>
            </div>
            <div class='cell'>
              <h2><a href="/products/1">Serrano Hobo</a></h2>
              <div class='clear'></div>
              <a href="#">0 people have this</a>
              <span>Rating 3</span>
              <div id='stars-wrapper-1'>
                <select>
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3" selected="selected">3</option>
                  <option value="4">4</option>
                  <option value="5">5</option>
                </select>
              </div>
            </div>
            <div class='cell'>
              <a href="#" class="button">I have this</a>
              <a href="#" class="button">I want this</a>
            </div>
          </div></a>

When I try to wrap this with JQuery, and output it, Jquery ends up closing my first <a> tag, and throwing other <a> tags in the code at seemingly random places, producing that in the screenshot here: (took screenshot because the output formatting was so bad)

The differences is that it * closes the first <a> right away, * inserts second <a> surrounding my first <div> * inserts third <a> after my second <div> before the <h2> * inserts a 4th <a> after the <h2> and before the intended <a>

As a result this is really messing up the autocomplete code that I use afterwards. This two snippets were literally generated one right after the other:

console.log(code);
console.log($(code));

Could someone please tell me whats going on an how to fix it?

Thanks!

Answer 1

Block elements are not allowed inside <a> elements. The browser tries to correct this but seems to produce invalid HTML code.

Make sure you have only inline elements inside.

Why do you have the outer <a> element anyway? It seems to serve no purpose. It does not even have an href attribute, which is invalid as well.

Just remove it.

Answer 2

div s are not valid within an a tag, use spans with display:block; instead, or change the a to a div and attach a click event handler to mimic an a tag.

Answer 3

div is a block element. a is an inline element. Block elements are illegal inside of inline elements. I don't think it's really jQuery to blame so much as your browser fixing things up when jQuery sets an element's innerHTML .

Answer 4

You cannot place a block element <div> inside of an inline element <a> . Also, you cannot place another anchor tag within an anchor tag. There's all sorts of invalid code going on here, so jQuery is choking up on it.

I highly recommend you validate your code , fix the errors, and go from there.

Side Note: HTML5 actually does allow block elements within inline elements, but only if you apply the proper CSS turning the block element into an inline element itself. Your best bet is to still stay away from block elements within inline for simplicity sake.