Почему я не могу добавить <br/"> с JQuery.html?

Почему этот код работает:

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

Но этот код вызывает ошибку:

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

Я попытался поместить <br /> до и после тега </div>, такую ​​же ошибку. Я попытался изменить его с <br /> на <br>. Хром всегда говорит в инспекторе следующее:

Uncaught SyntaxError: Unexpected token ILLEGAL

Ответы

Ответ 1

Попробуйте разбить его на цепочку:

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

Ответ 2

Это отлично работает для меня:

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

в Chrome и Firefox. Какую версию jQuery вы используете?

На стороне примечание <br /> есть XML (включая XHTML), а не HTML. HTML <br>.

Ответ 3

Я попробовал следующее SSCCE и работает безупречно в IE, FF, Safari, Opera и Chrome (все последние версии).

Таким образом, ваша проблема, скорее всего, связана с объявленным вами типом doctype или с использованием старой версии 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 illegal in HTML strict. Just to test :)
            });
        </script>
        <style>

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