javascript - 将 li 项目添加到可使用按钮选择的列表中

Question

<ol id="selectable">

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

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

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

标签： javascriptjquery

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>