Как создать элемент div с помощью jQuery и добавить его на страницу?

Правильное создание и добавление элементов в jQuery

Вы на верном пути, но есть несколько нюансов, которые помогут сделать код чище и предсказуемее. Давайте разберём все способы по порядку.

1. Создание элемента через jQuery

Самый простой способ — передать в функцию $() строку с HTML-разметкой:

var $newDiv = $('<div>'); // создаёт пустой div
var $newDivWithClass = $('<div class="new-block">'); // div с классом
var $fullBlock = $('<div class="new-block"><h3>Заголовок</h3><p>Текст</p></div>'); // готовый блок

2. Добавление элемента в DOM

Есть несколько методов для вставки. Основные:

• append() — добавляет внутрь элемента, в конец
• prepend() — добавляет внутрь элемента, в начало
• after() — добавляет сразу после элемента
• before() — добавляет перед элементом

Пример с вашим контейнером:

// Создаём элемент
var $newBlock = $('<div class="new-block"><h3>Заголовок</h3><p>Текст блока</p></div>');

// Добавляем в конец контейнера
$('#container').append($newBlock);

3. Цепочка методов (chaining)

jQuery позволяет объединять вызовы методов в одну цепочку. Это делает код компактнее:

$('<div>', { class: 'new-block' })
  .html('<h3>Заголовок</h3><p>Текст блока</p>')
  .appendTo('#container');

Обратите внимание на appendTo() — это альтернатива append(), но работает наоборот: сначала создаётся элемент, потом он вставляется в цель.

4. Поэтапное создание (рекомендуемый способ)

Для сложных элементов лучше создавать их по частям:

// Создаём контейнер
var $block = $('<div>', { class: 'new-block' });

// Создаём заголовок
var $title = $('<h3>').text('Заголовок');

// Создаём параграф
var $text = $('<p>').text('Текст блока');

// Собираем всё вместе
$block.append($title, $text);

// Вставляем на страницу
$('#container').append($block);

5. Почему ваш код не работал?

Проблема была в том, что вы использовали .html() после создания элемента — это вполне рабочий подход, но он заменяет содержимое. Если ваш контейнер уже имел какой-то контент, .html() мог его стереть. Лучше использовать .append() или .text() для добавления текста.

6. Проверка создания элемента

Можно проверить длину jQuery-объекта или наличие в DOM:

var $newDiv = $('<div>');
console.log($newDiv.length); // 1 — элемент существует в памяти

// После вставки проверяем, что он появился на странице
$('#container').append($newDiv);
console.log($('#container .new-block').length); // 1 — элемент в DOM

Используйте эти подходы, и ваши манипуляции с DOM станут предсказуемыми и чистыми.

// Создаём div с классом, id и текстом
var $newDiv = $('<div>', {
  'class': 'new-block',
  'id': 'block1',
  'text': 'Привет, мир!',
  'css': {
    'background': '#f0f0f0',
    'padding': '10px'
  },
  'click': function() {
    alert('Клик по блоку!');
  }
});

// Вставляем в конец body
$('body').append($newDiv);

var $block = $('<div>', { class: 'block' });
$block.append('<h3>Заголовок</h3>').appendTo('#container');