jQuery 附加文本

Question

我想在 div 中附加一些简单的数据，例如：

$('#msg').append('Some text');

在正文中，我想我需要放置 html 之类的。

<div id="test">    

<div id="msg"></div>  //show text inside it.

</div>

但是，我想向 #msg 添加一些 CSS。例如，背景颜色。现在的问题是，由于 #msg div 始终存在，即使文本未附加到它，我也会看到背景颜色。我尝试添加像“display:none”这样的CSS，但在这种情况下我看不到附加到它的文本。 我可以这样做，以便仅当文本附加到 #msg div 时才出现在 #test 中吗？谢谢。

Answer 1

附加文本的正确方法（与附加HTML对比）是：

var someText = "Hello, World!";
$('#msg').append(document.createTextNode(someText));

如果someText来自用户输入或其他任何内容，它将是正确的 HTML 转义。这应该可以防止 JavaScript 注入，这是世界上第三大最常见的网络安全漏洞。

来自https://stackoverflow.com/a/944456/122441

Answer 2

使用Escape。

$('#msg').html('A styled <span style="background: yellow">paragraph</span>');
$('#msg').show();

为什么不在需要时

Answer 3

我知道这个问题已经有不同的答案，但这里还有一个。我有类似的要求，所以花了一点时间试图找到一种方法来做到这一点。

如果您知道 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>

希望以上内容可以帮助寻找类似答案的人

干杯

Answer 4

您可以使用多种方法来完成此操作。您可以创建一个 css 类并执行以下操作：
方法1
CSS:

.hello{ background-color: green }

HTML

<div id="msg"></div>

JavaScript:

$("#msg").append("hello world").addClass("hello");

方法2
HTML

<div id="msg" class="hello" style="display:none;"></div>

CSS：

.hello{ background-color: green }

Javascript：

$("#msg").append("hello world").show();

方法3
HTML：

<div id="msg"></div>

JavaScript：

$("#msg").append("hello world").css("background-color","green");

Answer 5

$('#msg').append('Some text').show();