jq的DOM操作增删改
样式
body{ width: 100%; height: 100%; } ul{ padding-top:20px; } ul> li{ width: 100px; height: 30px; background: #c4e3f3; float: left; list-style: none; text-align: center; margin-left: 10px; font-size:7px; line-height: 30px; } #list{ clear: both; padding-top:10px; text-align: center; } input{ margin-top: 10px; } button{ margin-top: 20px; margin-left: 20px; } #box{ margin-top:100px; width: 100%; height: 100%; } #box ul li{ width: 100px; height: 30px; background: #c4e3f3; float: left; list-style: none; text-align: center; margin-left: 10px; font-size:7px; line-height: 30px; }结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul id="elect"> <li id="app">前置</li> <li id="applast">追加</li> <li id="delF">删除第一个</li> <li id="delL">删除最后一个</li> <li id="update">替换</li> </ul> <br> <ul id="list"> <li><input type="checkbox"></li> <li>姓名</li> <li>性别</li> <li>年龄</li> <li>操作</li> </ul> <div id="box"></div> <br> 姓名:<input type="text" id="names"><br> 性别:<input type="text" id="sex"><br> 年龄:<input type="text" id="age"><br> <button id="btn" style="display: none">修改</button> </body> </html>js
<script src="../js/jquery-3.2.1.js"></script> <script> //前置 $('#app').click(function () { $("#box").prepend(app()) }) //追加 $('#applast').click(function () { $("#box").append(app()) }) //删除第一个 $("#delF").click(function () { $("#box ul:first-child").remove() }) //删除最后一个 $("#delL").click(function () { $("#box ul:last-child").remove() }) //替换 $("#update").click(function () { if($("input:checkbox:checked").length){ $("button").show() } }) //修改 $("#btn").click(function () { var list=$('<ul>') var oldlist=$("input:checkbox:checked").parents("ul") $.each($("input:text"),function (i,v) { var list_li=$('<li>'); list_li.html($(v).val()) list.append(list_li) // console.log(list_li) }) list.prepend("<li><input type='checkbox'></li>") list.append("<li>替换</li>") list.replaceAll( oldlist) }) //封装app function app() { var username="" var sex="" var age="" var html="" username+=$("#names").val() sex=$("#sex").val() age+=$("#age").val() html+="<ul>"+" <li><input type='checkbox'></li>"+"<li>"+username+"</li>"+"<li>"+sex+"</li>"+"<li>"+age+"</li>"+"<li>替换</li>"+"</ul>" return html } </script>