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时出现在{{1}}内吗？感谢。

Answer 1

附加文字（与附加 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://stackoverflow.com/a/944456/122441

Answer 2

为什么不使用

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

需要时逃生。

Answer 3

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

如果您知道HTML的结构，则可以使用jQuery以 HTML的形式获取内容，然后通过添加相同的HTML来更改内容。< / p>

var lastPageText = $('#test p').html();
        $('#test p').html( lastPageText + ' &#128578;' )

<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

很高兴您也可以使用这种方式来添加文本。

function escapeHtml(unsafe) {
  return unsafe
     .replace(/&/g, "&amp;")
     .replace(/</g, "&lt;")
     .replace(/>/g, "&gt;")
     .replace(/"/g, "&quot;")
     .replace(/'/g, "&#039;");
}


var text = 'Put any text here';
$('#text').append(escapeHtml(text)).show();

希望这会有所帮助。

Answer 5

您可以使用多种方式执行此操作。您可以创建一个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 6

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

jQuery附加文本

6 个答案: