<!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>