jQuery 追加文本

Posted 2023-03-11

【中文标题】jQuery 追加文本

【英文标题】：jQuery append text

【发布时间】：2011-09-29 03:20:21

【问题描述】：

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

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

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

<div id="test">    

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

</div>

但是，我想在#msg 中添加一些 CSS。例如，背景颜色。现在的问题是，由于#msg div 一直存在，即使没有附加文本，我也会看到背景颜色。我试图添加像“显示：无”这样的 CSS，但在这种情况下，我看不到附加到它的文本。 我可以这样做，以便 #msg div 仅在附加文本时出现在 #test 内吗？谢谢。

【问题讨论】：

OP，请考虑将 Hendy Irawan 的答案更改为接受的答案。

这篇文章似乎包含两个不同的问题：1）如何将文本附加到 <div> 和 2）如何在添加文本之前隐藏 <div>。

【参考方案1】：

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

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

如果someText 来自用户输入或其他任何内容，它将被正确地进行 HTML 转义。这应该防止javascript injection, the 3rd most common web security vulnerability in the world。

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

【讨论】：

这应该是公认的答案。感谢您发布此内容以及为什么这是将文本安全地附加到元素的正确方法的解释。

【参考方案2】：

为什么不使用

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

需要时逃跑。

【讨论】：

方法 .html() 确实将现有内容替换为新内容。我认为提问者没有意识到替换和附加之间存在微小而重要的区别。

【参考方案3】：

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

如果你知道 HTML 的结构，你可以使用 jQuery 获取 as 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>

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

干杯

【讨论】：

这是附加恕我直言的确切定义

我从来没有说过这是最好的方式，如果有人想尝试，那是另一种方式。有时您有一个无法更改的平台元素。

【参考方案4】：

您可以通过多种方式做到这一点。您可以创建一个 css 类并执行以下操作：方法 1 CSS：

.hello background-color: green 

HTML

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

Javascript：

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

方法二 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");

【讨论】：

@AliKhanusiya 因为 .append() 附加 HTML 而不是文本。

@AliKhanusiya 您可能还需要阅读它：“内容：DOM 元素、元素数组、HTML 字符串或要插入到匹配元素集中每个元素末尾的 jQuery 对象。”

【参考方案5】：

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

【讨论】：

谢谢。这有效，但只是想知道如何？ #msg div 保留在 html 中，但除非 jquery 使用 show，否则它如何不应用 css？

这不会附加文本，它会附加 HTML。大不同。

同意@usr。如果“文本”来自用户输入，这将导致 JavaScript 注入。

$('#msg').text( $('#msg').text() + 'Some text' ) 会更安全吗？根据jQuery API，.text( [text] ) 将文本转义为.createTextNode()。

不知道为什么人们对您的回答持否定态度。你答对了。