Добавление номера в блока

08 ноября 2021, 22:20

Как создать функцию, при которой при нажатие на кнопку создавался блок и добавлялся к нему номер.

Например есть классический блок #1
При нажатие на кнопку создавался новый блок только к нему добавлялась следующая цифра и так каждый раз при клике на кнопку. Помогите реализовать и понять данную функцию.

Answer 1

Там много чего можно добавить в процессе создания, но конкретно нумерацию можно делать на CSS-counter)

let add = document.getElementById('add'); 
 
add.addEventListener('click', function(){ 
  createIn(document.body, 'div', 'bubu'); 
}); 
 
function createIn(parent, tag, className){ 
  let node = document.createElement(tag); 
  node.className = className; 
  parent.appendChild(node); 
 
  return node; 
}

.bubu { 
  counter-increment: bubu; 
} 
 
.bubu::before { 
  content: "#" counter(bubu); 
}

<button id="add">Add</button>

То же самое на jQuery:

$('#add').on('click', function(){ 
  createIn('body', 'div', 'bubu'); 
}); 
 
function createIn(parent, tag, className){ 
  var $node = $('<' + tag + '>').prop('class', className); 
  $(parent).append($node); 
   
  return $node; 
}

.bubu { 
  counter-increment: bubu; 
} 
 
.bubu::before { 
  content: "#" counter(bubu); 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<button id="add">Add</button>

И, нумерация без CSS, на jQ:

var i = 1; 
$('#add').on('click', function(){ 
  $('body').append( '<div>#' + (i++) + '</div>' ); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<button id="add">Add</button>

Answer 2

document.querySelector('button').onclick = function(e){ 
  let elem = document.createElement('div'), 
      container = document.querySelector('.container'); 
  elem.id = '#'+container.childNodes.length; 
  elem.innerHTML = '#'+container.childNodes.length; 
  container.append(elem); 
};

<button>Create Element</button> 
<div class="container"></div>

Синонимизатор для текста на русском языке

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Добавление номера в блока

Не работает ajax в wordpress

Подключение ссылки на сборку Excel при работе с csc.exe C#

Удалить использование unsafe кода

Как создать привязку к объекту, определённому в другом пространстве имён?