with JQuery.html? Why does this code work: $('div.error_container').html('
No more foo allowed
...">
Clever Geek Handbook

Why can't I add <br/"> with JQuery.html?

Why does this code work:

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

But this code throws an error:

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

I tried to put <br />

before and after the tag </div>

, same error. I tried to change it from <br />

to <br>

. Chrome always says the following in the inspector:

Uncaught SyntaxError: Unexpected token ILLEGAL
+12


source to share


3 answers


Try chaining it:



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


source


This works great for me:

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


in Chrome and Firefox. Which version of jQuery are you using?

On the side, the annotation <br />

is XML (including XHTML), not HTML. HTML <br>

.

+3


source


I tried the following SSCCE and it works flawlessly in IE, FF, Safari, Opera and Chrome (all latest versions).

So your problem is most likely due to the doctype you declared or using an older version of 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>
+3


source






More articles:


All Articles