Question

<ol id="selectable">

  <li class="ui-widget-content">List Item 1</li>
  
</ol>

如何使用添加按钮将新项目添加到列表中，并且当我使用jQuery单击按钮时索引将增加+1？

例如，当我单击添加时，将添加列表项2，然后单击以添加列表项3。

Answer 1

您可以在没有 jQuery 的情况下做到这一点？

创建一个按钮，并将其赋予ID btn 以在javascript中选择它
通过ID选择列表
创建一个名为 index 的变量，例如在每次单击按钮
当用户单击按钮，增加索引并创建新的 li 元素
设置 li 的内容，最后将其添加到列表

这是完整的示例

const selectable = document.getElementById('selectable');
const button = document.getElementById('btn');

let index = 1;

button.addEventListener('click', () => {
    index++;
    const li = document.createElement('li');
    li.textContent = 'List Item ' + index;
    selectable.appendChild(li);
});

<button id="btn">Add</button>
<ol id="selectable">

  <li class="ui-widget-content">List Item 1</li>
  
</ol>

Answer 2

使用jQuery，您可以使用append函数在另一个元素后面插入一个元素：

$('#add').click(function(e){
  var itemid = $('#list li:last').attr('id');
  var num = parseInt(itemid.substring(4, itemid.length), 10)+1;
  $('#list li:last').append('<li id="item'+num+'">List Item '+num+'</li>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add">Add item to list</button>
<ul id="list">
<li id="item1">List Item 1</li>
</ul>

使用按钮可以将li项目添加到列表中

2 个答案: