jQuery追加文本

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

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

在正文中，我想我需要像html一样放置html

<div id="test">    

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

</div>

//显示其中的文本。

但是，我想在

#msg

中添加一些CSS。例如，背景色。现在的问题是，由于

#msg

div一直存在，所以即使文本没有附加到它，我也能看到背景色。我曾尝试添加类似“display:none”的css，但在这种情况下，我看不到附加到它的文本。

---

我是否可以这样做，使

#msg

div仅在添加文本时才会显示在

#test

中？谢谢。

您可以使用多种方法执行此操作。您可以创建css类并执行此操作：

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

方法1
CSS:

HTML

方法2
HTML

Javascript:

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

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

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

方法3 HTML:

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

---

添加文本的正确方法是：

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

如果

someText

来自用户输入或其他任何内容，它将被正确的HTML转义。这应该可以防止

从

为什么不使用

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

$（'#msg'）.html（'A styled段落'）；
$（'#msg'）.show（）；

---

需要时逃离。

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

如果您知道HTML的结构，您可以使用jQuery将内容获取为HTML，然后通过添加来更改相同HTML的内容

var lastPageText=$（'#test p'）.html（）；
$（“#test p'）.html（lastPageText+”🙂；）

这就是即使在span

中，事情也会变得完美的方式。这很有效，但只是想知道如何做？msg div保留在html中，但它如何不应用css，除非jquery使用show？这不会附加文本，而是附加html。大的区别。同意@usr。如果“文本来自用户输入，这将导致JavaScript注入。

$（'#msg'）.text（$（'#msg'）.text（）+'Some text'）

会更安全吗？根据.text（[text]）用

.createTextNode（）

转义文本。我不知道为什么人们对你的答案排序为否定。您的回答正确。这应该是公认的答案。感谢您在发布本文的同时解释为什么它是安全地将文本附加到element.OP的正确方法，请考虑将Hendy Irawan的答案更改为可接受的答案。这个帖子似乎包含两个不同的问题：1）如何将文本追加到<代码> <代码>和2）如何隐藏<代码> <代码>，直到添加了文本。@ AykhanhansiyApple（因为AppEnter）附加HTML而不是文本。@ AliKhanusiya，您可能也需要阅读它：内容：DOM元素、元素数组、HTML字符串或jQuery对象，以插入匹配元素集中每个元素的末尾确实用新内容替换现有内容。我认为提问者没有意识到替换和附加之间有一个微小而重要的区别。这就是附加的确切定义。IMHOI从未说过这是最好的方式，如果有人想尝试，这是另一种方式。有时你有一个平台元素你无法更改。

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

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

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

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