jQuery 附加文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6588630/
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
jQuery append text
提问by sunjie
I want to append some simple data in a div like:
我想在 div 中附加一些简单的数据，例如：
$('#msg').append('Some text');
In the body, i think i will need to place the the html like.
在正文中，我想我需要放置 html 之类的。
<div id="test">
<div id="msg"></div> //show text inside it.
</div>
However, I want to add some CSS to the #msg. For example, background color. Now the problem is that, since the #msgdiv is present all the time, i see the background color even when the text is not appended to it. I have tried to add css like "display:none, but in that case i can not see the text appended to it.
Can i do it so that the #msgdiv appears inside the #testonly when the text is appended to it? Thanks.
但是，我想将一些 CSS 添加到#msg. 例如，背景颜色。现在的问题是，由于#msgdiv 一直存在，即使没有附加文本，我也会看到背景颜色。我试图添加像“display:none”这样的 css，但在这种情况下，我看不到附加到它的文本。我可以这样做，以便#msgdiv#test仅在文本附加到它时才出现在里面吗？谢谢。
采纳答案by Naftali aka Neal
$('#msg').append('Some text').show();
回答by Hendy Irawan
The proper way to append text(constrast with appending HTML) would be:
附加文本的正确方法（与附加HTML 相比）是：
var someText = "Hello, World!";
$('#msg').append(document.createTextNode(someText));
If someTextis coming from user input or anything else, it will be properly HTML-escaped. Which should prevent JavaScript injection, the 3rd most common web security vulnerability in the world.
如果someText来自用户输入或其他任何内容，它将被正确地进行 HTML 转义。这应该可以防止JavaScript 注入，这是世界上第三个最常见的 Web 安全漏洞。
回答by WesternGun
Why not use
为什么不使用
$('#msg').html('A styled <span style="background: yellow">paragraph</span>');
$('#msg').show();
Escape when needed.
需要时逃跑。
回答by Syfer
I know this question has been answered with different variations but here is one more. I had a similar requirement so spent a little time trying to find a way to do it.
我知道这个问题已经得到了不同的回答，但这里还有一个。我有一个类似的要求，所以花了一点时间试图找到一种方法来做到这一点。
Ifyou know the structure of a HTML, you can get the contents as HTMLusing jQuery, next change the contents of the same HTML by adding to it.
如果您知道 HTML 的结构，您可以使用 jQuery将内容作为 HTML获取，然后通过添加更改相同 HTML 的内容。
var lastPageText = $('#test p').html();
$('#test p').html( lastPageText + ' 🙂' )<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="test"><p>This is how things go perfecting well<span> even in a span</span></p></div>Hope the above helps someone looking for similar answer
希望以上内容可以帮助寻找类似答案的人
Cheers
干杯
回答by ????
Folks you can also use this way to append text.
伙计们，您也可以使用这种方式来附加文本。
function escapeHtml(unsafe) {
return unsafe
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
var text = 'Put any text here';
$('#text').append(escapeHtml(text)).show();
Hope this helps.
希望这可以帮助。
回答by Michael Schinis
You can do this using multiple ways. You can create a css class and do this:
Method 1
CSS:
您可以使用多种方式执行此操作。您可以创建一个 css 类并执行以下操作：
方法 1
CSS：
.hello{ background-color: green }
HTML
HTML
<div id="msg"></div>
Javascript:
Javascript：
$("#msg").append("hello world").addClass("hello");
Method 2
HTML
方法二
HTML
<div id="msg" class="hello" style="display:none;"></div>
CSS:
CSS：
.hello{ background-color: green }
Javascript:
Javascript：
$("#msg").append("hello world").show();
Method 3HTML:
方法 3HTML：
<div id="msg"></div>
Javascript:
Javascript：
$("#msg").append("hello world").css("background-color","green");
