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>
>
