jQuery 添加元素
jQuery 提供了各种方法在现有的 HTML 文档中添加新的 DOM 元素。根据您的需求,您可以在各种位置(在现有标签之前、之后)添加这些新元素。
jQuery append() 方法
jQuery 的 append() 方法将内容添加到每个匹配元素的末尾。您也可以在单个函数调用中追加多个元素。
以下是 append() 方法的语法:
这里的 content 参数可以是HTML字符串、DOM元素、文本节点、元素和文本节点的数组或jQuery对象,插入到匹配元素集合的每个元素的末尾。
概述
考虑以下HTML内容:
现在如果我们按照以下方式应用 append() 方法:
它将会产生如下结果:
示例
让我们尝试以下示例并验证结果:
jQuery appendTo() 方法
jQuery appendTo() 方法和 appendTo() 方法执行的任务相同。主要区别在于语法的具体位置,即内容和目标的位置。
以下是 appendTo() 方法的语法:
这里的 content 参数可以是一个HTML字符串,一个DOM元素,文本节点,元素和文本节点的数组,或者jQuery对象,来插入到匹配元素集合中的每个元素的末尾。
示例
让我们尝试以下示例并验证结果:
jQuery after()方法
jQuery的 after() 方法在匹配的每个元素之后添加内容。您也可以在一个函数调用中插入多个元素。
以下是 after() 方法的语法:
在这里 内容 参数可以是HTML字符串、DOM元素、文本节点、元素和文本节点的数组或jQuery对象,以将其插入到匹配的元素集的末尾。
概要
考虑以下HTML内容:
现在,如果我们按照以下方式应用 after() 方法:
会产生以下结果:
示例
让我们尝试以下示例并验证结果:
jQuery insertAfter() 方法
jQuery insertAfter() 方法将内容添加到匹配的每个元素后面。 after() 和 insertAfter() 方法执行相同的任务。主要区别在于语法,具体来说是内容和目标的放置位置。
以下是 after() 方法的语法:
在这里, content 参数可以是一个HTML字符串、一个DOM元素、文本节点、元素和文本节点的数组或者用于插入到匹配元素集的每个元素末尾的jQuery对象。
示例
让我们尝试以下示例并验证结果:
jQuery prepend() 方法
jQuery prepend() 方法在每个匹配元素的开头添加内容。您还可以在单个函数调用中添加多个元素。
下面是 prepend() 方法的语法:
在这里, content 参数可以是一个HTML字符串、一个DOM元素、文本节点、元素和文本节点的数组或者jQuery对象,要插入到匹配元素集合中每个元素的末尾。
概述
考虑以下HTML内容:
现在,如果我们按照以下方式使用 prepend() 方法:
它将产生以下结果:
示例
让我们尝试以下示例并验证结果:
jQuery prependTo()方法
jQuery的 prependTo() 方法与 prepend() 方法执行相同的任务。主要区别在于语法,具体而言是内容和目标的放置方式。
**prependTo() **方法的语法如下:
在这里, content 参数可以是HTML字符串、DOM元素、文本节点、元素和文本节点的数组,或者jQuery对象,用于插入到匹配元素集合的每个元素末尾。
示例
让我们尝试以下示例并验证结果:
jQuery before()方法
jQuery的 before() 方法在匹配的每个元素之前添加内容。您还可以在单个函数调用中插入多个元素。
下面是 before() 方法的语法:
这里的 content 参数可以是一个HTML字符串、一个DOM元素、文本节点、元素和文本节点的数组,或者是要插入到匹配元素集合末尾的jQuery对象。
Synopsis
考虑以下HTML内容:
现在,如果我们按照如下方式应用before()方法: before() 。
它将产生以下结果:
示例
让我们尝试以下示例并验证结果:
jQuery insertBefore()方法
jQuery的insertBefore()方法在匹配的每个元素之前添加内容。before()和insertBefore()方法执行相同的任务。主要区别在于语法 – 具体而言,在内容和目标的位置上。
以下是after()方法的语法:
content 参数可以是HTML字符串、DOM元素、文本节点、元素和文本节点的数组或jQuery对象,用于在匹配元素集合的每个元素的末尾插入内容。
示例
让我们尝试下面的示例,然后验证结果: