Pourquoi ne puis-je pas ajouter un & lt; br / & gt; avec JQuery .html?

Pourquoi ce code fonctionne:

$('div.error_container').html('<div class="error">No more foo allowed</div>');

Mais ce code provoque une erreur:

$('div.error_container').html('<div class="error">No more foo allowed<br /></div>');

J'ai essayé de mettre le <br /> avant et après la </div> tag, même erreur. J'ai essayé de changer de <br /> à <br>. Chrome toujours dit ce qui suit dans l'inspecteur:

Uncaught SyntaxError: Unexpected token ILLEGAL

source d'informationauteur Paul Tomblin

  1. 14

    Essayer de le décomposer en une chaîne:

    var $div = $('<div class="error"></div>').html('No more foo allowed')
                                         .append('<br />');
$('div.error_container').html($div);
  2. 3

    Cela fonctionne parfaitement pour moi:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $('div.error_container').html('<div class="error">No more foo allowed<br /></div>');
});
</script>
</head>
<body>
<div class="error_container">
</div>
</body>
</html>

    dans Chrome et Firefox. Quelle est la version de jQuery utilisez-vous?

    Sur une note de côté <br /> est du XML (y compris XHTML) pas en HTML. HTML est <br>.

  3. 3

    J'ai essayé les SSCCE et il fonctionne parfaitement sous IE, FF, Safari, Opera et Chrome (toutes les versions les plus récentes).

    Alors votre problème est probablement lié avec le doctype que vous avez déclarée ou en utilisant une ancienne version de google Chrome.

    <!doctype html>
<html lang="en">
    <head>
        <title>SO question 2173556</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                $('#foo').html('<div>foo<br>foo</div>');
                $('#bar').html('<div>bar<br/>bar</div>'); //Yes, that's illegal in HTML strict. Just to test :)
            });
        </script>
        <style>

        </style>
    </head>
    <body>
        <div id="foo"></div>
        <div id="bar"></div>
    </body>
</html>
  4. 0

    J'ai également eu un problème similaire, ne sais pas si c'est pertinent. Je faisais du c# mvc pour un cms.

    Donc j'avais un peu de html entrée de l'utilisateur et je les affiche en utilisant "@Html.Raw(Modal.Content)"

    À l'intérieur de la Modale.Contenu il y avait un <br /> et j'ai eu la question ajoutant que contenu dans le code html à l'aide de jquery .html("@Html.Raw(Modal.Content)")

    Mais à la fin, la question n'est pas <br />

    Il y a un invisible \n donc je n'ai .html("@Html.Raw(Modal.Content).Replace("\n", "")") et le problème a été résolu. Le <br> est resté dans mon contenu, et il fonctionne comme prévu.