Thanks Michael, I expected that is was the invalid HTML, but didn't realize that the bowser would not let me get away with it, even if it was only for a split second before JS took over.
I will change the way my list works to move the content outside of the anchor tag, and into a div. Thanks for clearing this up. On Aug 31, 2:18 pm, "Michael Geary" <[EMAIL PROTECTED]> wrote: > Yes, it's the invalid HTML that is tripping you up. You can't nest one <a> > tag inside another. The browser hoists the nested <a> tag outside the parent > to avoid this. > > No, you can't insert HTML that's as invalid as this into the DOM, not even > momentarily. You can insert *some* kinds of invalid HTML into the DOM. In > your example, you also have a <p> tag nested inside an <a> tag, which is > invalid too. The browser lets you get away with the, but not the nested <a> > tags. > > Turn off all the JavaScript in your page (or make a simple test page with > the same HTML), and look at the DOM in Firebug or any other DOM inspection > tool. You'll see why you're getting surprising results. For example, here's > what Firebug shows for one of your <div> elements: > > <div class="itemHolder"> > <a> > Item Name > <span class="test"> > <p>Contents </p> > </span> > </a> > <a href="#">Link</a> > </div> > > See how different that is from your original HTML? > > -Mike > > > From: hubbs > > > I have a listing of links that are titles for items in my database. > > Each item might have a description in the database as well, so I was > > wanting to print the description, then replace it with a * if there is > > any text for the description. The descriptions contain HTML such as > > links, so inserting this into my anchor tag makes it invalid HTML, > > which I understand. But I remove it from the DOM and replace it with > > a *. Strange thing is, it does not seem like it is getting removed > > correctly and replaced. > > > Any ideas why this might be happening? (And yes, like I said, I > > understand it is incorrect HTML, but since it gets replaced almost > > instantly, I didn't think this would be a problem.) > > > I am using: > > $(document).ready(function() { > > $(".test").each(function() { > > if ($(this).html() == "") { > > //Do nothing > > } else { > > $(this).html("*"); > > } > > }); > > }); > > > My links that need the content replaced: > > <div class="itemHolder"><a>Item Name<span class="test"><p>Contents <a > > href="#">Link</a></p></span></a></div> > > <div class="itemHolder"><a>Item Name<span class="test"><p>Contents <a > > href="#">Link</a></p></span></a></div> > > <div class="itemHolder"><a>Item Name<span class="test"><p>Contents <a > > href="#">Link</a></p></span></a></div>