ansaurus

Question

Why can't I add a with JQuery .html?

Answer 1

+1 A:

This works perfectly for me:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"&gt;&lt;/script&gt;
<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. What version of jQuery are you using?

On a side note   is XML (including XHTML) not HTML. HTML is  .

cletus 2010-01-31 22:05:02

Read my question again, cletus. Especially the part where I said "I treid[sic] changing it from to ."

Paul Tomblin 2010-01-31 22:08:17

If above doesn't work (you explicitly stated "try" ;) ), then *try* ` ` instead.

BalusC 2010-01-31 22:08:27

I tried that one as well. Interestingly enough, it doesn't seem to matter whether I use , or , in all cases the browser reports that it got , and gives me the error.

Paul Tomblin 2010-01-31 22:10:50

I probably should have mentioned that this is actually in a XSL document that's parsed on the server side (don't ask) and sent to the client as html. It's possible that the conversion from xml to html is the culprit, but breaking it into two parts seems to have fixed it.

Paul Tomblin 2010-01-31 22:17:48

Answer 2

+1 A:

Try breaking it up into a chain:

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

karim79 2010-01-31 22:08:31

That did it. I would like to know why, but for now I'm happy that it works.

Paul Tomblin 2010-01-31 22:12:54

Strangely enough, I ran into a similar problem today (with a br tag), and breaking it up into baby steps solved it. I too would like to know why jQuery doesn't like creating/appending elements containing line breaks.

karim79 2010-01-31 22:16:30

I get the feeling the other guys are right about the doctype angle.

karim79 2010-01-31 22:24:08

Answer 3

A:

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

So your problem is likely related with the doctype you declared or using an old 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"&gt;&lt;/script&gt;
        <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>

BalusC 2010-01-31 22:14:06

ansaurus

tags:

views:

answers:

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

related questions