<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建插入节点</title>
<script type='text/javascript' src="jquery-3.2.1.js"></script>
<script>
$(function () {
//创建一个<li id="aa">aa</li>
//并加入到#city的子节点
//1加入到元素的末(2种写法)
// $("<li id='aa'>aaa</li>").appendTo($("#city"));
// alert($("#aa").text());
// $("#city").append("<li id='bb'>bbb</li>")
// alert($("#bb").text());
// //2加入到元素的开始(2种写法)
// $("<li id='cc'>ccc</li>").prependTo($("#city"));
// alert($("#cc").text());
// $("#city").prepend("<li id='dd'>ddd</li>")
// alert($("#dd").text());
// //加入到某个节点后
// $("<li id='ee'>eee</li>").insertAfter($("#bj"));
// $("#bj").after("<li id='ff'>fff</li>");
// //加入到某个节点前
// $("<li id='gg'>ggg</li>").insertBefore($("#bj"));
// $("#bj").before("<li id='hh'>hhh</li>");
//删除节点
// $("#city li").click(function(){
// $(this).remove();
// });
// $("#city").remove();
//清空
// alert("要清空了")
// $("#city").empty();
// 复制bj节点 添加到hj后面
// clone节点时需要注意克隆后的节点的ID属性，若元节点有ID属性，
// 则克隆后，会出现一个文档中右两个ID相同的节点的情况。
// $("#bj").clone().attr("id","bj2").insertAfter($("#hj"));
//创建一个li节点，替换#city的最后一个li子节点
// $("<li id='asdf'>asdf</li>").replaceAll($("#city li:last"));
//创建一个li节点，替换#city的第二li子节点
// $("#city li:eq(1)").replaceWith($("<li id='asbf'>[asbd]</li>"))
//互换bj 和hj(换过去就没有了)
//$("#bj").replaceWith($("#hj"));
// alert(1);
// var $bj2 = $("#bj").clone(true);
// var $hj = $("#hj").replaceWith($bj2);
// alert(2);
// $("#bj").replaceWith($hj);
//包装单个li
$("#game li").wrap("<font color='red'></font>")
//所有li包一起
$("#city li").wrapAll("<font color='red'></font>")
//包装li里面的子内容
$("#body li").wrapInner("<font color='red'></font>")
})
</script>
</head>
<body>
<p>你喜欢那里</p>
<ul id="city">
<li id="bj" value="1">北京</li>
<li id="sh" value="2">上海</li>
<li id="dj" value="3">东京</li>
<li id="sr" value="4">首尔</li>
</ul>
<p>你喜欢游戏</p>
<ul id="game">
<li id="hj" value="1">红警</li>
<li id="ms" value="12">魔兽</li>
</ul>
<p>你喜欢哪个人</p>
<ul id="body">
<li id="man" value="1">男</li>
<li id="woman" value="12">女</li>
</ul>
name: <input type="text" name="username" value="ll">
</body>
</html>