下面我来详细讲解使用JS DOM和jQuery分别实现简单增删改的完整攻略。
首先我们需要明确一下，JS DOM是指通过JavaScript来操作DOM元素，实现交互效果的一种技术。下面是详细的步骤：
首先，我们需要一个按钮，并绑定一个事件，当用户点击按钮时会自动创建一个新的元素。具体代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Add Element Using JS DOM</title>
</head>
<body>
<button id="addButton">Add Element</button>
<ul id="list"></ul>
<script>
var addButton = document.getElementById("addButton");
var list = document.getElementById("list");
var count = 1;
addButton.addEventListener("click", function(){
var newItem = document.createElement("li");
newItem.innerHTML = "Item " + count;
count++;
list.appendChild(newItem);
});
</script>
</body>
</html>
在这段代码中，我们首先获取到了按钮和列表元素的引用，然后在按钮上绑定了一个click事件。在事件触发时，我们创建了一个新的li元素，并通过innerHTML属性设置了它的内容，最后将它追加到了列表元素中。
接下来，我们来看一下如何删除元素。我们可以通过给每个元素绑定一个事件来实现这个功能。具体代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Remove Element Using JS DOM</title>
</head>
<body>
<ul id="list">
<li>Item 1 <button class="removeButton">Remove</button></li>
<li>Item 2 <button class="removeButton">Remove</button></li>
<li>Item 3 <button class="removeButton">Remove</button></li>
</ul>
<script>
var removeButtons = document.querySelectorAll(".removeButton");
var list = document.getElementById("list");
for (var i = 0; i < removeButtons.length; i++) {
removeButtons[i].addEventListener("click", function() {
var li = this.parentNode;
list.removeChild(li);
});
}
</script>
</body>
</html>
在这段代码中，我们首先获取到了所有的删除按钮，然后依次给它们绑定了一个click事件。在事件触发时，我们首先获取到了当前按钮所在的li元素，然后调用parentNode属性获取到它的父元素，最后将它从父元素中删除。
最后，我们来看一下如何修改元素。我们可以通过将元素变为可编辑状态，并在用户完成编辑时更新内容。具体代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Edit Element Using JS DOM</title>
</head>
<body>
<ul id="list">
<li>Item 1 <button class="removeButton">Remove</button></li>
<li>Item 2 <button class="removeButton">Remove</button></li>
<<li contenteditable="true">Item 3 </li>
</ul>
<script>
var list = document.getElementById("list");
var editableItem = list.querySelector("[contenteditable]");
editableItem.addEventListener("blur", function() {
editableItem.removeAttribute("contenteditable");
});
</script>
</body>
</html>
在这段代码中，我们首先获取到要编辑的元素，并给它绑定了一个blur事件。在事件触发时，我们调用removeAttribute方法将contenteditable属性从它中移除。
接下来让我们来介绍使用jQuery来实现简单的增删改功能。jQuery的DOM操作功能非常强大，下面是详细的步骤：
添加元素也很简单，我们只需要创建一个按钮，当用户点击按钮时就会自动创建一个新的元素。具体代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Add Element Using jQuery</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<button id="addButton">Add Element</button>
<ul id="list"></ul>
<script>
var count = 1;
$("#addButton").click(function() {
var newItem = $("<li>Item " + count + "</li>");
count++;
$("#list").append(newItem);
});
</script>
</body>
</html>
在这段代码中，我们首先引入了jQuery库，然后获取到了按钮元素的引用，并通过click方法绑定了一个click事件。在事件触发时，我们首先创建了一个新的li元素，然后将它追加到了列表元素中。
删除元素也很简单，我们依旧可以通过给每个元素绑定一个事件来实现这个功能。具体代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Remove Element Using jQuery</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<ul id="list">
<li>Item 1 <button class="removeButton">Remove</button></li>
<li>Item 2 <button class="removeButton">Remove</button></li>
<li>Item 3 <button class="removeButton">Remove</button></li>
</ul>
<script>
$(".removeButton").click(function() {
var li = $(this).closest("li");
li.remove();
});
</script>
</body>
</html>
在这段代码中，我们首先获取到了所有的删除按钮，然后通过click方法绑定了一个click事件。在事件触发时，我们首先获取到当前按钮所在的li元素，然后调用closest方法获取到最近的li元素，并调用remove方法将它从DOM树中删除。
修改元素也十分简单，我们可以通过给元素绑定一个双击事件，当用户双击元素时就会变成可编辑状态。具体代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Edit Element Using jQuery</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<ul id="list">
<li>Item 1 <button class="removeButton">Remove</button></li>
<li>Item 2 <button class="removeButton">Remove</button></li>
<li contenteditable="true">Item 3</li>
</ul>
<script>
$("#list [contenteditable]").dblclick(function() {
$(this).removeAttr("contenteditable");
});
</script>
</body>
</html>
在这段代码中，我们首先获取到要编辑的元素，然后通过dblclick方法绑定了一个双击事件。在事件触发时，我们调用removeAttr方法将contenteditable属性从它中移除。
本文链接：http://task.lmcjl.com/news/892.html