JQuery добавить текст

Я хочу добавить некоторые простые данные в div как:

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

В теле, я думаю, мне нужно будет разместить html как.

<div id="test">    

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

</div>

Однако я хочу добавить CSS в #msg. Например, цвет фона. Теперь проблема заключается в том, что, поскольку #msg div присутствует все время, я вижу цвет фона, даже когда текст не добавляется к нему. Я попытался добавить css как "display: none", но в этом случае я не вижу текст, добавленный к нему. Могу ли я сделать это, чтобы #msg div появился внутри #test только при добавлении текста к нему? Спасибо.

Ответ 1

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

Ответ 2

Правильный способ добавления текста (контраст с добавлением HTML):

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

Если someText поступает из пользовательского ввода или чего-то еще, он будет правильно экранирован HTML. Который должен предотвратить JavaScript-инъекция, 3-я наиболее распространенная уязвимость веб-безопасности в мире.

Из fooobar.com/questions/150336/...

Ответ 3

Вы можете сделать это несколькими способами. Вы можете создать класс 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");