jQuery modify my html after ajax(img inside a)

Question

I want create infinite scroll and get html from server with jQuery get. I receive right html part:

    <li>
    <dl>
        <dt>

            <a href=/product/1/>

                    <img src="/media/cache/14/9a/149a1ecabfd10c168495c70ab5ab6ddb.jpg" width="237" height="300" alt='Some text' />

            </a>
        </dt>
        <dd class="title">Some name</dd>
        <dd>Some text</dd>
        <dd class="price">

                <span class="old-price">&euro; 10.0</span>&euro; 8.0

        </dd>
    </dl>
</li>

Then I try append this text to ul with command:

$(data).appendTo(container);

But browser render next html:

<li>
    <dl>
        <dt>

            <a href="/product/1"></a>

                    <img src="/media/cache/14/9a/149a1ecabfd10c168495c70ab5ab6ddb.jpg" width="237" height="300" alt="Some text">


        </dt>
        <dd class="title">Some name</dd>
        <dd>Some text</dd>
        <dd class="price">

                <span class="old-price">€ 10.0</span>€ 8.0

        </dd>
    </dl>
</li>

As we see, img inside a turned into img after a. What kind of magic jQuery create?

Answer 1

<a href=/product/1/> is interpreted as <a href="/product1"></a>. Try quoting value of href.