Самый простой метод, в зависимости от назначения элементов <span>, состоит в том, чтобы избежать явного присвоения им номеров и вместо этого использовать сгенерированный CSS контент:
// caching a reference to the <button> element:
let button = document.querySelector('#btn1');
// binding the anonymous method of as the 'click' event-handler:
button.addEventListener('click', function() {
// creating an <li> and a <span> element:
let li = document.createElement('li'),
span = document.createElement('span');
// setting the text of the <li>:
li.textContent = 'Item ';
// appending the <span> to the <li>:
li.appendChild(span);
// adding the 'listAdd' class to the <span>:
span.classList.add('listAdd');
// finding the first (if any) 'ul.tabs' element, and appending
// the <li> (along with its content) to that element:
document.querySelector('ul.tabs').appendChild(li);
});
ul.tabs {
counter-reset: spanCount;
}
.tabs li {
counter-increment: spanCount;
}
li span.listAdd::before {
content: counter(spanCount);
}
<input type="button" id="btn1" value="Add an Item">
<div id="cntn">
<ul class="tabs">
<li>Item <span class="listAdd"></span></li>
<li>Item <span class="listAdd"></span></li>
<li>Item <span class="listAdd"></span></li>
<li>Item <span class="listAdd"></span></li>
<li>Item <span class="listAdd"></span></li>
</ul>
</div>
Очевидно, что вышеприведенное также можно переписать, если <span> предназначен только для представления / стиля чисел, чтобы применить сгенерированный контент к<li> элементов вместо:
// caching a reference to the <button> element:
let button = document.querySelector('#btn1');
// binding the anonymous method of as the 'click' event-handler:
button.addEventListener('click', function() {
// creating an <li> and a <span> element:
let li = document.createElement('li');
// setting the text of the <li>:
li.textContent = 'Item ';
// finding the first (if any) 'ul.tabs' element, and appending
// the <li> to that element:
document.querySelector('ul.tabs').appendChild(li);
});
ul.tabs {
counter-reset: spanCount;
}
.tabs li {
counter-increment: spanCount;
}
/* using ::after, instead of ::before, in order to
correctly place the generated content: */
li::after {
/* note the addition of an empty space to separate
the counter from the text: */
content: ' ' counter(spanCount);
}
<input type="button" id="btn1" value="Add an Item">
<div id="cntn">
<ul class="tabs">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
Контент, сгенерированный CSS, отсутствует в DOM, поэтому, если пользователь должен иметь возможность взаимодействовать со счетчиком / номером (выбор,копирование и т. д.), тогда одна из следующих опций:
// binding the anonymous function as the 'click' event-handler
// of the '#btn1' element:
$('#btn1').on('click', function() {
// creating an <li> element:
$('<li>', {
// setting its text to the supplied string:
'text': 'Item '
// appending a new element to the created <li>:
}).append(
// creating a <span> element:
$('<span>', {
// setting its class:
'class': 'listAdd',
// setting the text of the <span> to be equal to
// the current number of '.listAdd' elements, plus 1:
'text': $('.listAdd').length + 1
})
// appending the created <li> - along with its created child -
// to the '.tabs' element:
).appendTo('.tabs');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" id="btn1" value="Add an Item">
<div id="cntn">
<ul class="tabs">
<li>Item <span class="listAdd">1</span></li>
<li>Item <span class="listAdd">2</span></li>
<li>Item <span class="listAdd">3</span></li>
<li>Item <span class="listAdd">4</span></li>
<li>Item <span class="listAdd">5</span></li>
</ul>
</div>
Вышеприведенное, конечно, можно переписать простым JavaScript:
// finding the first (if any) '#btn1' element:
document.querySelector('#btn1')
// binding the anonymous function as the event-handler of
// the 'click' event:
.addEventListener('click', function() {
// creating an <li> element and a <span> element:
let li = document.createElement('li'),
span = document.createElement('span'),
// finding the first (if any) element matching the CSS Selector:
list = document.querySelector('.tabs');
// setting the text content of the <li> element:
li.textContent = 'Item ';
// appending the <span> element to the <li> element:
li.appendChild(span);
// adding the 'listAdd' class ot the created <span>:
span.classList.add('listAdd');
// setting the text content of the created <span> to be equal to
// the current number of 'span.listAdd' elements found within the
// list element, and adding 1 to that number:
span.textContent = list.querySelectorAll('span.listAdd').length + 1;
// appending the created <li> (and children) to the list element:
list.appendChild(li);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" id="btn1" value="Add an Item">
<div id="cntn">
<ul class="tabs">
<li>Item <span class="listAdd">1</span></li>
<li>Item <span class="listAdd">2</span></li>
<li>Item <span class="listAdd">3</span></li>
<li>Item <span class="listAdd">4</span></li>
<li>Item <span class="listAdd">5</span></li>
</ul>
</div>
- CSS:
- JavaScript:
- jЗапрос: