把input里的内容挂载到ul标签中并且可以删除和编辑

以下是一个使用jQuery实现的例子：

HTML代码：

<input type="text" id="new-item" placeholder="Add new item">
<button id="add-btn">Add</button>

<ul id="item-list">
</ul>

JavaScript代码：

// Add new item
$('#add-btn').on('click', function() {
  var newItem = $('#new-item').val();
  if (newItem !== '') {
    $('#item-list').append('<li>' + newItem + '<span class="edit-btn">Edit</span><span class="delete-btn">Delete</span></li>');
    $('#new-item').val('');
  }
});

// Delete item
$('#item-list').on('click', '.delete-btn', function() {
  $(this).parent().remove();
});

// Edit item
$('#item-list').on('click', '.edit-btn', function() {
  var oldItem = $(this).parent().text().trim();
  $(this).parent().html('<input type="text" class="edit-item" value="' + oldItem + '"> <button class="save-btn">Save</button>');
});

// Save edited item
$('#item-list').on('click', '.save-btn', function() {
  var newItem = $(this).prev().val();
  $(this).parent().html(newItem + ' <span class="edit-btn">Edit</span><span class="delete-btn">Delete</span>');
});

该代码将添加按钮、文本框和ul标签放在HTML代码中。然后，在JavaScript代码中，我们使用jQuery来监听添加、删除和编辑按钮的点击事件，并相应地更新ul标签中的内容。我们使用parent()方法找到每个li元素，然后使用remove()、html()和val()方法进行删除、编辑和保存操作。