4.7　向页面添加内容

4.7　向页面添加内容

jQuery提供了很多函数来操作页面的元素和内容：从简单地替换HTML到精确地找到和选择的元素相关的新的HTML，再到完全从页面删除标签和内容。

注意：位于testbed教程目录下的示例文件content_functions.html允许测验每个jQuery函数。只要在Web浏览器中打开该文件，在文本框中输入一些文本，然后单击任何一个“Run It”，就可以看到每个函数是如何工作的。

为了研究这些函数后面的例子，假设有一个页面，具有如下的HTML：

＜div id="container"＞

＜div id="errors"＞

＜h2＞Errors：＜/h2＞

＜/div＞

·. html（）和DOM的innerHTML属性作用相同。它读取一个元素中的当前HTML，并且使用其他的一些HTML来替换当前内容。把html（）函数和一个jQurey选择一起使用。

要获取选择中的当前HTML，只要在jQurey选择的后面添加.html（）。例如，可以使用本节开始的HTML代码段来运行如下命令：

alert（$（'#errors'）.html（））；

这行代码创建了一个包含文本“＜h2＞Errors：＜/h2＞”的警告框。当以这种方式使用html（）的时候，可以复制一个特定元素中的HTML并将其粘贴到页面的另一个元素中。

如果为.html（）提供一个字符串作为参数，就替换了选择中的当前内容：

$（'#errors'）.html（'＜p＞There are four errors in this form＜/p＞'）；

这行代码替换了拥有名为errors的ID的一个元素中的所有HTML。它将会把示例HTML代码段替换为：

＜div id="container"＞

＜div id="errors"＞

＜p＞There are four errors in this form＜/p＞

＜/div＞

注意，它替换了已有的＜h2＞标签。可以使用下面列出的其他函数来避免替换HTML。

·. text（）的功能和.html（）一样，但是它不接收HTML标签。当你想要用一个标签替换文本的时候，它很有用。例如，在本节开始的代码中，你将会看到其中带有文本“Errors：”的一个＜h2＞标签。假设在运行了一个程序来查看表单中是否有任何错误之后，你想要使用“No errors found”替换文本，你可以使用如下代码：

$（'#errors h2'）. text（'No errors found'）；

＜h2＞标签仍然在那里，只是其中的文本改变了。对于传递给text（）函数的任何HTML标签，jQuery对其编码，因此，＜p＞转换为＆lt；p＆gt；。如果你想要在页面上真正显示方括号和标签名称，这很方便。例如，可以使用它来显示示例的HTML代码以供其他人查看。

·append（）把HTML作为选择元素的最后一个孩子元素添加。例如，假设选择一个＜div＞标签，只想在结束＜/div＞标签之前添加一些HTML，而不是要替换＜div＞的内容。.append（）函数是一种很好的方法，可以在符号表项（＜ul＞）或编号列表（＜ol＞）的末尾添加一项。例如，假设使用本节开始的HTML代码，在一个页面上运行如下代码：

$（'#errors'）.append（'＜p＞There are four errors in this form＜/p＞'）；

这个函数运行之后，得到的HTML如下所示：

＜div id="container"＞

＜div id="errors"＞

＜h2＞Errors：＜/h2＞

＜p＞There are four errors in this form＜/p＞

＜/div＞

注意，＜div＞中最初的HTML保持不变，新的HTML只是添加在其后。

·prepend（）和append（）类似，但是，它在选择的开始标签之后直接添加HTML。

例如，假设在和前面列出的同样的HTML上运行如下代码：

$（'#errors'）.prepend（'＜p＞There are four errors in this form＜/p＞'）；

在这个prepend（）函数之后，得到了如下所示的HTML：

＜div id="container"＞

＜div id="errors"＞

＜p＞There are four errors in this form＜/p＞

＜h2＞Errors：＜/h2＞

＜/div＞

现在，新添加的内容直接出现在＜div＞的开始标签之后。

·如果想要在选择之外添加HTML，要么在选择的元素的开始标签之前，或者紧接在元素的结束标签之后，可以使用.before（）或.after（）函数。例如，当访问者提交表单的时候，检查表单中的一个文本字段以确保该字段不为空，这是常见的任务。假设在表单提交之前，字段的HTML如下所示：

＜input type="text"name="userName"id="userName"＞

现在假设当访问者提交表单的时候该字段为空。可以编写程序来检查该字段，然后在该字段后添加一条错误消息。要在这个字段之后添加消息（现在不要担心如何实际地检查表单字段的内容是否正确，我们将在9.4节学习这点），可以使用.after（）函数，如下所示：

$（'#userName'）.after（'＜span class="error"＞User name required＜/span＞'）；

这行代码使得Web页面显示错误消息，并且HTML部分将如下所示：

＜input type="text"name="userName"id="userName"＞

＜span class="error"＞User name required＜/span＞

·. before（）函数直接把新的内容放在选择的元素之前。

注意：本节所介绍的函数html（）、text（）等，都是在页面上添加或替换内容最常用的方式，但是，它们并非唯一的方法。可以在http：//api.jquery.com/category/manipulation/找到更多的函数。

替换和删除选择

有时候，我们可能想要完全替换或删除选择的元素。例如，假设使用JavaScript创建了一个弹出对话框（不是老式的alert（）方法，而是看上去更为专业的一个对话框，而实际上只是页面顶端浮动的一个绝对定位的＜div＞）。当访问者单击对话框上的“Close”按钮，当然要从页面中删除对话框。要做到这一点，可以使用jQuery remove（）函数。假设弹出对话框的ID为popup，可以使用如下代码来删除它：

$（'#popup'）.remove（）；

.remove（）函数不仅限于对单个元素使用。假设想要删除所有使用一个error类的＜span＞标签，可以这么做：

$（'span.error'）.remove（）；

也可以使用新内容完全替换一个选择。例如，假设有一个页面，其中具有公司销售的产品的照片。当访问者单击一个产品的图片，就将其添加到购物车中。当图片被单击的时候，我们可能想要用一些文本替换＜img＞标签（例如，“Added to cart”）。我们将在第5章学习如何让特定元素对事件（例如，图像被单击）做出回应，但是现在，只要假设想要替换ID为product101的＜img＞标记的文本。下面使用jQuery做到这一点：

$（'#product101'）.replaceWith（＜p＞Added to cart＜/p＞'）；

这段代码从页面删除了＜img＞标签并且用一个＜p＞标签替代它。

注意：jQuery还包含了一个名为clone（）的函数，它允许我们复制一个选择的元素。我们将在4.11节中看到这个函数的用法。

4.7 向页面添加内容