接上篇文章
3，插入节点
插入节点的方法如下图：
4，删除节点
(1) remove()方法
作用是从DOM中删除所有匹配的元素。示例代码如下：
var $li =$("ul li:eq(1)").remove(); //获取第二个<li>节点后，将它从网页中删除。注意：当某个节点用remove()删除后，该节点包含的所有后代节点将同时被删除。这个方法的返回值是一个指向被删除节点的引用，因此可以在以后继续使用这些元素。
(2) detach()方法
detach() 和remove()方法一样，也是从DOM中去掉匹配的元素，但需要注意的是，这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件，附加的数据都会保留下来。
示例代码如下：
var $li =$("ul li:eq(1)").detach(); //获取第二个<li>节点后，将它从网页中删除。(3) empty()方法
严格来说empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点。
示例代码如下：
var $li = $("ul li:eq(1)").empty(); //获取第二个<li>节点后，清空元素里的内容。5，复制节点
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>css ajax </title>
<script type ="text/javascript" src ="jquery.js" ></script>
<script type ="text/javascript">
$(document).ready(function(){
$("ul li:eq(2)").click(function(){
$(this).clone().appendTo("ul"); //复制当前单击的节点，并将它追加到<ul>元素中。
});
});
</script>
</head>
<body>
<p title ="选择最喜欢的水果">选择最喜欢的水果</p>
<ul>
<li title ="苹果">苹果</li>
<li title ="橘子">橘子</li>
<li title ="菠萝">菠萝</li>
</ul>
</body>
</html>6，节点替换
如果要替换某个节点，jQuery提供了相应的方法，即replaceWith()和replaceAll();
replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML活着DOM元素。
示例代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>jQuery test </title>
<script type ="text/javascript" src ="jquery.js" ></script>
<script type ="text/javascript">
$(document).ready(function(){
$("p").replaceWith("<strong>你最不喜欢的水果是？</strong>")
});
</script>
</head>
<body>
<p title ="选择最喜欢的水果">选择最喜欢的水果</p>
<ul>
<li title ="苹果">苹果</li>
<li title ="橘子">橘子</li>
<li title ="菠萝">菠萝</li>
</ul>
</body>
</html>运行结果如下：
replaceAll()方法的示例代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>jQuery test </title>
<script type ="text/javascript" src ="jquery.js" ></script>
<script type ="text/javascript">
$(document).ready(function(){
$("<li>荔枝</li>").replaceAll("li")
});
</script>
</head>
<body>
<p title ="选择最喜欢的水果">选择最喜欢的水果</p>
<ul>
<li title ="苹果">苹果</li>
<li title ="橘子">橘子</li>
<li title ="菠萝">菠萝</li>
</ul>
</body>
</html>运行结果如下：
7，包裹节点
(1) wrap()方法
jQuery代码示例如下：
$("strong").wrap("<br></br>"); //用<br>标签将<strong>元素包裹起来运行结果如下:
<br><srong>something</strong></br>(2) wrapAll()方法
该方法会将所有匹配的元素用一个元素来包裹，它不同于wrap()方法，wrap() 方法是将所有的元素进行包裹。
jQuery示例代码如下：
$("strong").wrapAll("<br></br>");运行结果如下：
<br>
<strong>你最喜欢的水果</strong>
<strong>你最不喜欢的水果</strong>
</br>(3) wrapInner()方法
该方法将每一个匹配的元素的字内容包括(文本节点) 用其结构化的标记包裹起来。jQuery示例代码如下：
$("strong").wrapInner("<br></br>");运行结果如下：
<strong><br>最喜欢的水果</br></strong>时间： 2024-10-28 23:52:16