<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="./js/jQuery3.3.1.js"></script> <script type="text/javascript" src="./js/jquery-color.js"></script> </head> <body> <div > <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> <script type="text/javascript">
//创建元素 $("<ul></ul>") $(function () { let text = "xiaohua"; // $("ul").append($(`<li>${text}</li>`)) //后置追加 // $(`<li>${text}</li>`).appendTo("ul") //子追加到父元素成为最后一个子元素 // $("ul").prepend($(`<li>${text}</li>`)) // 前置追加 // $(`<li>${text}</li>`).prependTo("ul") //子追加到父元素成为第一个子元素 // $("li:eq(1)").after($(`<li>${text}</li>`)) //兄弟元素后面追加 // $(`<li>${text}</li>`).insertAfter($("li:eq(1)")) // $("li").before($(`<li>${text}</li>`)) //兄弟元素前面追加 $(`<li>${text}</li>`).insertBefore($("li:eq(1)")) // $("ul").remove() //移除自己, 连同事件一起清除 // $("ul").detach() //移除标签, 不移除事件, 可以继续调用 // $("ul").empty() // 清空ul标签内的所有元素 // $("ul").text("");//清空 // $("ul").html("");//清空 // $("ul").val(""); //针对 input , button .等 }) </script> </body> </html>
JQuery增删改查
猜你喜欢
转载自www.cnblogs.com/tcpblog/p/9958732.html
今日推荐
周排行