Tener un HTML válido con javascript que tiene HTML

Publicado el lun 28 febrero 2011

Cuando creamos alguna página en XHTML, deberíamos desear que ésta pase la validación de la W3C. Para mi era bastante fácil hasta que me tocó meter tags HTML dentro de javascript, les doy un ejemplo:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Ejemplo</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#etiqueta").append(" <b>mundo</b>");
        });
    </script>
    </head>
    <body>
        <!-- Se agregará la palabra mundo en negrita al final del 
        contenido del siguiente <p> mediante jquery -->
        <p id="etiqueta">Hola</p>
    </body>
</html>

Si intentamos validar este código nos arrojará:
Line 10, Column 39: document type does not allow element "b" here
Este error se lanza porque estamos empleando un tag HTML dentro del script, en este caso el tag es . Para cuando tengamos que meter HTML dentro de nuestro código javascript, deberemos recurrir al marcador <![[ ... ]]> para contener los tags dentro del javascript:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Ejemplo</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
    //<![CDATA[
        $(function(){
            $("#etiqueta").append(" <b>mundo</b>");
        });
    //]]>
    </script>
    </head>
    <body>
        <!-- Se agregará la palabra mundo en negrita al final del 
        contenido del siguiente <p> mediante jquery -->
        <p id="etiqueta">Hola</p>
    </body>
</html>

Al intentar validar el código corregido obtendremos:
This document was successfully checked as XHTML 1.0 Transitional!
El marcador hace que el intérprete considere el contenido de éste como datos, por lo que el HTML inserto en él no es considerado. Para colocarlo en javascript debemos hacerlo en forma comentada, de esta forma se indica al navegador que no considere el HTML inserto pero si que se ejecute el javascript.