JQuery中的基本DOM操作

1.创建元素节点

例如，创建两个

元素节点，并加入到

中
首先创建元素节点

var $li_1=$("

");
var $li_2=$("
");
1
2
3
然后蒋新创建的节点插入文档中

$("ul").append($li_1);
$("ul").append($li_2);/也可以写成$("ul").append($li_1).append($li_2)/
1
2
2.创建文本节点

创建文本节点就是在创建元素节点时直接把文本内容写出来，然后使用append（）等方法将其添加到文档中

var $li_1=$("

• a
");
var $li_2=$("
• b
");
$("ul").append($li_1);
$("ul").append($li_2);
1
2
3
4
5
无论$(html)中的html代码多复杂都可以这样创建 ，例如：

$("

• 这是一个复杂的组合
")
1
3.创建属性节点

var $li_1=$("

• a
");
var $li_2=$("
• b
");
$("ul").append($li_1);
$("ul").append($li_2);
1
2
3
4
5
4.插入节点
1.append() 　 向每个匹配的元素内部追加内容
示例：

HTML代码：

我想说：

JQuery代码：$("p").append("你好"); 结果：

我想说：你好

1 2 3 4 2.appendTo() 　将所有匹配的元素追加到指定的元素中 示例：

HTML代码：

我想说：

JQuery代码：$("你好").appendTo("p") 结果：

我想说：你好

1 2 3 4 3.prepend() 　向每个匹配的元素内部前置内容 示例：

HTML代码：

我想说：

JQuery代码：$("p").prepend("你好") 结果：

你好我想说：

1 2 3 4 4.prependTo()　将所有元素前置到指定元素中 示例：

HTML代码：

我想说：

JQuery代码：$("你好").prependTo("p") 结果：

你好我想说：

1 2 3 4 5.after() 　在每个匹配元素之后插入内容 示例：

HTML代码：

我想说：

JQuery代码：$("p").after("你好") 结果：

我想说：

你好 1 2 3 4 6.insertAfter()　将所有匹配元素插入到指定元素的后面 示例：

HTML代码：

我想说：

JQuery代码：$("你好").insertAfter("p") 结果：

我想说：

你好 1 2 3 4 7.before()　 在每个元素之前插入内容 示例：

HTML代码：

我想说：

JQuery代码：$("p").before("你好") 结果：你好

我想说：

1 2 3 4 8.insertBefore() 　将所有匹配的元素插入到指定的元素的前面 　示例： 　

HTML代码：

我想说：

JQuery代码：$("你好").insertBefore("p") 结果：你好

我想说：

1 2 3 4 5.删除节点 1.remove()　从DOM中删除所有匹配元素，传入的参数用于根据jQuery表达式来筛选元素。当某个节点用remove()方法删除后，该节点所包含的所有后代节点都将被删除，这个方法的返回值是一个指向已被删除的节点的引用，因此还可以继续使用这些元素 示例：

var $li=$("ul li:eq(1)").remove();//获取该节点后将其从网页中删除
$("ul").append($li);//把刚才删除的节点又加回来了
1
2
上述代码可以简化为：

$("ul li:eq(1)").appendTo("ul");
//appendTo()可用来移动元素
//移动元素时首先从文档上删除此元素，然后将该元素插入得到文档中的指定节点
1
2
3
另外 remove()方法也可以通过传递参数来选择地删除元素
$(“ul li”).remove(“li[title!=a]”)；//将li中title不等于a的

• 元素删除

  2.detach() 　　也是从ＤＯＭ中去掉所有匹配元素，但是不会把匹配的元素从jQuery对象中删除，因而可以在将来使用这些匹配元素，与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来.
  示例：

  $("ul li").click(function(){
  alert($(this).html());
  })
  var $li=$("ul li:eq(1)").detach();//删除元素
  $li.appndTo("ul");//重新追加此元素，发现之前的点击事件还能用，如果是remove()则不能再用。
  1
  2
  3
  4
  5
  6
  3.empty()
  严格来讲，empty()并不是删除节点，而是清空节点，他能清空元素中的所有后代节点

  $("ul li:eq(1)").empty();
  //此时清空了第二个

• 里的内容（注意是元素里），而这个节点符号标记还在，
  1
  2
  6.复制节点
  clone()
  如：点击一个li元素后再复制一个li元素,再将其添加到ul中

  $("ul li").click(function(){
  $(this).clone().appendTo("ul");
  })
  1
  2
  3
  新复制的节点并不具有任何行为（如之前的单击事件），如果希望复制元素的同时能够复制元素绑定的事件则：

  $(this).clone(true).appendTo("body");
  1
  7.替换节点
  replaceWith() 和 replaceAll作用相同，只是操作相互颠倒
  如想把

  a

  换成b可以如下写代码：
  法一：$("p").replaceWith("b");
  法二：$("b").replaceAll("p");

  如果在替换之前已经为元素绑定事件，替换后原先绑定的事件会与被，替换的元素一起消失，需要在新元素上重新绑定事件。

  8.包裹节点

  1.wrap()　将某个节点用其他标记包裹起来(将所有元素进行单独的包裹)
  如：$("strong").wrap("");
  得到的结果为：b

  2.wrapAll() 将所有匹配元素用一个元素来包裹。
  HTML代码如下：

  a
  b
  1
  2
  如果使用wrap() ，则结果如下：

  a
  b
  1
  2
  如果是 wrapAll() 结果如下：

  a
  b