Ошибка с методом append при создании элементов с помощью атрибутов

Question

Хочу добавить блок с классом .box в блок .structure

$('.btn.create-structure').on('click', function () {
    type = $(this).attr('data-type').split('-').pop();
    switch (type) {
      case '1':
        $('.structure').append('<div>', {
          'class': 'box',
          text: 'BOX'
        });
        break;
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="create-structure-buttons">
    <button class="btn create-structure" data-type="type-1">Выборка</button>
    <button class="btn create-structure" data-type="type-2">Сортировка</button>
    <button class="btn create-structure" data-type="type-3">Вставка</button>
    <button class="btn create-structure" data-type="type-4">Соответствие</button>
    <button class="btn create-structure" data-type="type-5">Истина / Ложь</button>
    <button class="btn create-structure" data-type="type-6">Свободный вопрос</
button>
</div>
<div class="structure"></div>

Но при этом блок создаётся, а ни класса, ни текста у него нету. Где моя ошибка? P.S. хотел бы создавать элемент с помощью атрибутов

Answer 1

https://api.jquery.com/append/

$('.btn.create-structure').on('click', function () {
    var type = $(this).attr('data-type').split('-').pop();
    switch (type) {
      case '1':
        $('.structure').append($('<div>').addClass('box').text('BOX'));
        break;
    }
})

.box {
  border: 3px solid lightgreen;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="create-structure-buttons">
    <button class="btn create-structure" data-type="type-1">Выборка</button>
    <button class="btn create-structure" data-type="type-2">Сортировка</button>
    <button class="btn create-structure" data-type="type-3">Вставка</button>
    <button class="btn create-structure" data-type="type-4">Соответствие</button>
    <button class="btn create-structure" data-type="type-5">Истина / Ложь</button>
    <button class="btn create-structure" data-type="type-6">Свободный вопрос</
button>
</div>
<div class="structure"></div>

я хотел бы создавать блок с помощью атрибутов

$('.btn.create-structure').on('click', function () {
    var type = $(this).attr('data-type').split('-').pop();
    switch (type) {
      case '1':
        $('.structure').append(
          $('<div>')
            .attr('class', 'box')
            .text('BOX')
        );
        break;
    }
})

.box {
  border: 3px solid lightgreen;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="create-structure-buttons">
    <button class="btn create-structure" data-type="type-1">Выборка</button>
    <button class="btn create-structure" data-type="type-2">Сортировка</button>
    <button class="btn create-structure" data-type="type-3">Вставка</button>
    <button class="btn create-structure" data-type="type-4">Соответствие</button>
    <button class="btn create-structure" data-type="type-5">Истина / Ложь</button>
    <button class="btn create-structure" data-type="type-6">Свободный вопрос</
button>
</div>
<div class="structure"></div>

Answer 2

Чтобы вторым параметром задавались атрибуты, нужно использовать основную функцию jQuery, либо ее алиас $

$('<div>', {
    'class': 'box',
    text: 'BOX'
})

$('.btn.create-structure').on('click', function () {
    type = $(this).attr('data-type').split('-').pop();
    switch (type) {
      case '1':
        $('.structure').append($('<div>', {
          'class': 'box',
          text: 'BOX'
        }));
        break;
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="create-structure-buttons">
    <button class="btn create-structure" data-type="type-1">Выборка</button>
</div>
<div class="structure"></div>

БЛОГ НА HUSL

Ошибка с методом append при создании элементов с помощью атрибутов

Ответы (2 шт):