为什么我不能在 JQuery .html 中添加 <br />？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2173556/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why can't I add a <br /> with JQuery .html?
提问by Paul Tomblin
Why does this code work:
为什么这段代码有效：
$('div.error_container').html('<div class="error">No more foo allowed</div>');
But this code causes an error:
但是这段代码会导致错误：
$('div.error_container').html('<div class="error">No more foo allowed<br /></div>');
I've tried putting the <br />before and after the </div>tag, same error. I've tried changing it from <br />to <br>. Chrome always says the following in the inspector:
我试过<br />在</div>标签前后放置，同样的错误。我试过把它从<br />改为<br>。Chrome 总是在检查器中说以下内容：
Uncaught SyntaxError: Unexpected token ILLEGAL
回答by karim79
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);
回答by cletus
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">
<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. What version of jQuery are you using?
在 Chrome 和 Firefox 中。您使用的是哪个版本的 jQuery？
On a side note <br />is XML (including XHTML) not HTML. HTML is <br>.
附带说明的<br />是 XML（包括 XHTML）而不是 HTML。HTML 是<br>.
回答by BalusC
I tried the following SSCCEand it works flawlessly in IE, FF, Safari, Opera and Chrome (all of the most recent versions).
我尝试了以下SSCCE，它在 IE、FF、Safari、Opera 和 Chrome（所有最新版本）中完美运行。
So your problem is likely related with the doctype you declared or using an old version of Chrome.
因此，您的问题可能与您声明的文档类型或使用旧版本的 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>
回答by Chong Jun Wei
I also had a similar issue, not sure if it is relevant. I was doing c# mvc for a cms.
我也有类似的问题，不知道是否相关。我正在为一个 cms 做 c# mvc。
So i had some html input from user and i display them using "@Html.Raw(Modal.Content)"
所以我有一些来自用户的 html 输入，我使用 "@Html.Raw(Modal.Content)"
Inside the Modal.Content there was a <br />and i had issue appending that content into the html using jquery .html("@Html.Raw(Modal.Content)")
在 Modal.Content 中有一个<br />，我在使用 jquery 将该内容附加到 html 时遇到了问题.html("@Html.Raw(Modal.Content)")
But in the end the issue was not <br />
但最终问题不是 <br />
There is an invisible \nso i did .html("@Html.Raw(Modal.Content).Replace("\n", "")")and the issue was solved. The <br>remained in my content and it work as expected.
有一个隐形\n所以我做.html("@Html.Raw(Modal.Content).Replace("\n", "")")了，问题解决了。将<br>留在我的内容，并正常工作。
