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>
