成这个任务需要两个步骤。
（1）创建两个新的<p>元素。
（2）将这两个新元素插入到文档中。
第（1）步可以使用jQuery的工厂函数$()来完成，格式如下：
$(html)
$(html)方法可以根据传入的HTML标记字符串，创建一个DOM对象，并且将这个DOM对象包装成一个
jQuery对象后返回。
首先，创建两个<p>元素，jQuery代码如下：
</script>
注意：使用text()方法获取div元素的文本内容时，是将全部匹配的元素中包含的文本内容都获 取出来了，即将div1和div2元素的文本都获取。而使用html()方法获取div元素的HTML内容时，只是 将第一个匹配元素，即div1元素包含的HTML内容显示出来了，并没有显示div2元素的HTML内容。
// 将第1个p元素添加到div中，使它能在页面中显示
$(“div”).append($p_2);
// 也可以采用链式写法： $("div").append($p_1).append($p_2);
运行代码后，新创建的<p>元素将被添加到页面当中。
创建文本节点
两个<p>元素节点已经创建完毕并插入到文档中了，此时需要为它们添加文本内容。具体的jQuery
要获取div元素的文本内容，可以使用下面的代码：
$("div").text();
得到的结果为：当前时间：2014-07-06 星期日 13:20:10
说明：text()方法取得的结果是所有匹配元素包含的文本组合起来的文本内容，这个方法也对 XML文档有效，可以用text()方法解析XML文档元素的文本内容。
</select>
（3）在引入jQuery库的代码下方编写jQuery代码，并应用val()方法获取该多行列表框的值，具体 代码如下：
<script type="text/javascript"> $(document).ready(function(){ $("select").val(['列表项1','列表项2']); alert($("select").val()); });
代码如下：
var $p_1 = $("<p>明日科技</p>"); // 创建第1个p元素，包含元素节点和文本节点，文本节点为“明日科技”
var $p_2 = $("<p>明日图书</p>"); // 创建第2个p元素，包含元素节点和文本节点，文本节点为“明日图书”
$("div").append($p_1);
第4章 使用jQuery操作DOM
本章要求：
DOM操作的分类 对元素的内容和值进行操作 创建节点 查找节点 插入节点 删除、复制与替换节点 遍历节点M
主要内容
1. DOM操作的分类 2. 对元素的内容和值进行操作 3. 对DOM节点进行操作 4. 对元素属性进行操作 5. 对元素的CSS样式操作 6. 综合实例：实现我的开心小农场
（3）在引入jQuery库的代码下方编写jQuery代码，实现为<div>标记设置文本内容和HTML内容，并 获取设置后的文本内容和HTML内容，具体代码如下：
<script type="text/javascript"> $(document).ready(function(){ $("#div1").text("<span style='color:#FF0000'>我是通过text()方法设置的HTML内容
（2）在页面的<body>标记中，添加一个包含3个列表项的可多选的多行列表框，默认为后两项被选 中，代码如下：
<select name="like" size="3" multiple="multiple" id="like"> <option>列表项1</option> <option selected="selected">列表项2</option> <option selected="selected">列表项3</option>
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
（2）在页面的<body>标记中，添加两个<div>标记，这两个<div>标记除了id属性不同外，其他均相 同，关键代码如下：
应用text()方法设置的内容 <div id="div1"> <span id="clock">当前时间：2014-07-06 星期日 13:20:10</span> </div> <br />应用html()方法设置的内容 <div id="div2"> <span id="clock">当前时间：2014-07-06 星期日 13:20:10</span> </div>
4.2.1 对元素内容操作
1．对文本内容操作 jQuery提供了text()和text(val)两个方法用于对文本内容操作，其中text()用于获取全部匹配 元素的文本内容，text(val)用于设置全部匹配元素的文本内容。例如，在一个HTML页面中，包括下 面3行代码。
<div> <span id="clock">当前时间：2014-07-06 星期日 13:20:10</span> </div>
运行本实例，将显示如图4-4所示的运行结果。从该运行结果，我们可以看出，应用text()设置文 本内容时，即使内容中包含HTML代码，也将被认为是普通文本，并不能作为HTML代码被浏览器解析 ，而应用html()设置的HTML内容中所包含的HTML代码就可以被浏览器解析。因此，文本“我是通过 html()方法设置的HTML内容”是红色的，而通过text()方法设置的HTML文本则是按照原样显示的
【例4-1】 设置div元素的文本内容 （1）创建一个名称为index.html的文件，在该文件的<head>标记中应用下面的语句引入jQuery库。
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
（2）在页面的<body>标记中，添加一个<div>元素，令它的文本内容为空，代码如下：
</span>"); $("#div2").html("<span style='color:#FF0000'>我是通过html()方法设置的HTML内容
</span>"); alert("通过text()方法获取：\r\n"+$("div").text()+"\r\n通过html()方法获取：
\r\n"+$("div").html()); });
要获取div元素的HTML内容，可以使用下面的代码：
alert($("div").html());
得到的结果如图4-2所示。
图4-2 获取到的div元素的HTML内容
要重新设置div元素的HTML内容，可以使用下面的代码：
$("div").html("<span style='color:#FF0000'>我是通过html()方法设置的HTML内容</span>");
</script>
运行本实例，效果如图4-1所示。
图4-1 设置div元素的文本内容 注意：使用text()方法重新设置div元素的文本内容后，div元素原来的内容将被新设置的内容 替换掉，包括HTML内容。例如，对下面的代码 <div><span id="clock">当前时间：2011-07-06 星期三 13:20:10</span></div> 应用“$("div").text("我是通过text()方法设置的文本内容");”设置值后，该<div>标记的内容将 变为 <div>我是通过text()方法设置的文本内容</div>
</script>
运行后将显示如图4-5所示的效果。 图4-5 获取到的多行列表框的值
4.3 对DOM节点进行操作
4.3.1 4.3.2 4.3.3 4.3.4
创建节点 插入节点 删除、复制与替换节点 遍历节点
4.3.1 创建节点
创建元素节点
例如要创建两个<p>元素节点，并且要把它们作为<div>元素节点的子节点添加到DOM节点树上，完
【例4-3】 为多行列表框设置并获取值。 （1）创建一个名称为index.html的文件，在该文件的<head>标记中应用下面的语句引入jQuery库。
