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.