html中怎样在列表追加item

最新推荐文章于 2024-11-14 00:00:11 发布

xiaoerbuyu1233

最新推荐文章于 2024-11-14 00:00:11 发布

阅读量464

点赞数 7

文章标签： html 前端

本文链接：https://blog.csdn.net/xiaoerbuyu1233/article/details/135566973

版权

<!DOCTYPE html>
<html>
<head>
    <title>Item Adder</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
    #itemList {
        max-height: 300px;
        overflow: auto;
    }
    </style>
</head>
<body>

<h2>Item List</h2>

<button id="btnAdd">Add Item</button>

<ul id="itemList">
</ul>

<script>
$(document).ready(function(){
  var itemNumber = 1; // Initialize item counter
  $("#btnAdd").click(function(){
    $("#itemList").append("<li>Item " + itemNumber + "</li>");
    itemNumber++; // Increment item counter
  });
});
</script>

</body>
</html>

html中怎样在列表追加item
在HTML中，要在列表中追加项目，我们通常选用JavaScript或者使用一些JavaScript库，比如jQuery。以下是使用JavaScript和jQuery在列表中追加项目的方法：
使用JavaScript
在HTML文档中，你可以像这样创建一个列表：
html
<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
<button onclick="addItem()">Add item</button>

<script>
function addItem() {
  var ul = document.getElementById("myList");
  var li = document.createElement("li");
  li.appendChild(document.createTextNode("新项目"));
  ul.appendChild(li);
}
</script>
上述代码会创建一个有两个项目的列表和一个添加新项目的按钮。每当点击此按钮时，列表会增加一个新项目。
使用jQuery
如果你的项目正在使用jQuery，你可以如下地更简单地添加新项目：
html
<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
<button id="addItem">Add item</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#addItem").click(function(){
    $("#myList").append("<li>新项目</li>");
  });
});
</script>
这将使用jQuery方法 .append()来添加新的<li>元素。
以上两种方式均无法永久保存新添加的项目，因为这些修改是在客户端进行的。如果需要永久性地保存这些更改，你可能需要将数据发送回服务器并进行后端处理。
21.9s
2129 Tokens