使用jQuery对DOM中的节点操作

<body>
<div class="contain">
<h2>祝福冬奥</h2>
<ul class="gamelist">
<li>贝克汉姆:衷心希望北京能够申办成功!</li>
<li>姚明:北京申办冬奥是个非常棒的机会!加油!</li>
<li>张虹:北京办冬奥,大家的热情定超乎想象</li>
<li>肖恩怀特:我爱北京,支持北京申办冬奥会</li>
</ul>
</div>
<script type="text/javascript" src="../JS/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
1.查找节点
1.1 设置h2的样式
$(".contain :header").css({"background":"#2a65ba","color":"#ffffff"});
1.2 li 最后一个没有边框
$(".gamelist li:last").css("border","none");
2.创建节点元素
var $newNode=$("<li></li>"); //创建空的li
var $newNode1=$("<li>小白:北京申办冬奥会是再适合不过的!</li>"); //创建含文本的li
var $newNode2=$("<li title='last'>小红:那么您喜欢哪些冬季奥运会项目?</li>"); //创建含属性的li
3.插入节点:分为内部插入和外部插入
$("ul").append($newNode1); //将$newNode1插入到ul列表中的后面
//$("ul li:eq(2)").append($newNode1);
$("ul").prepend($newNode2); //将$newNode1插入到ul列表中的前面
4.删除节点:有remove()、detach()、empty()三种删除节点的方法
$("ul li:eq(1)").remove(); //删除贝克汉姆的语句
5.替换节点:分为replaceWith()和replaceAll()两种方法
var $newNode3=$("<li>小黑:北京申办冬奥会是再适合不过的!</li>");
$("ul li:eq(2)").replaceWith($newNode3); //将下标为2的<li>文本内容替换为“$newNode3”
  注意点:replaceAll()和replaceWith()刚好相反,颠倒了代码的输入
var $newNode4=$("<li>小吕:北京申办冬奥会是再适合不过的!</li>");
$($newNode4).replaceAll("ul li:eq(3)"); //将下标为3的<li>文本内容替换为“$newNode4”
6.复制节点:true表示复制内容的同时,也复制了它的时间 false仅复制内容
          $("ul li:eq(1)").click(function(){
          $(this).clone(true).appendTo("ul");
          });
          $("ul li:eq(2)").click(function(){
          $(this).clone(false).appendTo("ul");
          });
});
    </script>
</body>
原文地址:https://www.cnblogs.com/weihaixiong/p/8522922.html