JQuery: добавить шаблонную коробку с некоторым внутренним HTML

Question

Извините, если мой заголовок не ясен, я не уверен, как это сформулировать. Я новичок в jQuery, и вот что я пытаюсь сделать.

Я хочу показать один или несколько блоков объявлений в верхней части веб-страницы.

Допустим, у меня есть какой-то шаблонный элемент "div" с именем класса, немного html, чтобы превратить его в симпатичную коробку. И заполнитель или что-то, где фактическое сообщение (HTML) будет.

Тогда я бы использовал $ .append, чтобы вставить каждое из этих полей на мою страницу, указав специальное сообщение для этого поля.

Моя проблема в том, как я могу создать такой шаблон DIV и как добавить к нему контент?

Надеюсь, это понятно ...

Answer 1

Вы можете создать вспомогательную функцию следующим образом:

$.messageDiv = function(message, style){
    var $div = $('<div>').addClass('message-div message-style-' + style);
    var $message = $('<p>').appendTo($div);

    $message.html(message); // Or use .text() if message contains no HTML or if should be escaped if it does contain HTML
    return $div;
}

А затем используйте его, чтобы добавить сообщение на страницу:

$('#content').prepend($.messageDiv('My Cool Message!', 'warning'));

И это создаст и добавит (добавит к внутренней вершине #content) эту разметку:

<div class="message-div message-style-warning">
    <p>Your text here</p>
</div>