How to add div inside of a href text via jquery

Question

I have some problems validate my template with http://validator.w3.org hope someone can let me know how i can fix this via jquery.

<a href="/video/213123/"><img src="/media/videos/tmb/213123/1.jpg" title="Funny Videos" alt="Funny Videos" /><div class="Title_URL">Girls Funny Videos</div></a>

When i validate my html page with http://validator.w3.org its say div Title_URL its not allow there ... but i need it because of my design ... its any way to make it via jquery so i don't have that error anymore ?

@Ohgodwhy are right. HTML specification does not allow DIVs inside anchor tags. — jtheman, Jun 15 '13 at 22:52
title should go on and first caractere of ids or class cannot be a number nor a upper case letter. So turn Title_URL into title_URL in order to validate and make sure that every browser will aplly style. In Html5 , div can receive block-level elements. I let you surch on W3C to find out how to do it correctly :) — G-Cyrillus, Jun 15 '13 at 23:41
What doc-type have you used for your page? Placing block elements inside an anchor element is only valid in HTML5. See this answer: http://stackoverflow.com/questions/1827965/is-putting-a-div-inside-an-anchor-ever-correct — Precastic, Jun 15 '13 at 22:55

score 1 · Answer 1 · answered Jun 15 '13 at 22:59

<a href="/video/213123/" id="href1"><img src="/media/videos/tmb/213123/1.jpg" title="Funny Videos" alt="Funny Videos" id="img1"/></a>

$('#img1').html = "<div class='Title_URL'>Girls Funny Videos</div>";

Here is the fiddle for your answer

http://jsfiddle.net/mastermindw/ASJW2/

and validator shows it as Passed

http://fiddle.jshell.net/mastermindw/ASJW2/show/

http://validator.w3.org/check?uri=http%3A%2F%2Ffiddle.jshell.net%2Fmastermindw%2FASJW2%2Fshow%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

score 0 · Answer 2 · answered Jun 15 '13 at 22:56

I suggest you render it as a <span> instead of a <div> when you're outputting the page. That way it will get validated properly. Then you can use the following code to replace it using jQuery:

$( 'a span' ).each(function() {
    $( this ).replaceWith( $( '<div>' + this.innerHTML + '</div>' ) );
});

How to add div inside of a href text via jquery

2 Answers2