《JavaScript与jQuery网页前端开发与设计-第2版》课件全套 周文洁 CH01 绪论、CH02 JavaScript入门 --- CH14 思政学习答题的设计与实现.ppt

10.2.1jQueryappend()和prepend() 2. 追加元素如果在append()或prepend()方法的参数位置使用选择器可以将已存在的其他元素对象移动到指定元素中。例如以下这种情况：h3这是一个标题/h3divid=testp这是一个段落/p/div10.2.1jQueryappend()和prepend() 2. 追加元素对其使用$(div#test).append($(h3))会将标题元素h3整个移动到div元素中。运行结果如下：divid=testh3这是一个标题/h3p这是一个段落/p/div10.2.1jQueryappend()和prepend() 3. 追加混合内容如果有不同类型的内容（比如文本和HTML元素）需要同时添加，可以在参数位置添加若干个变量，其间用逗号隔开即可。10.2.1jQueryappend()和prepend() 3. 追加混合内容例如这段代码将分别创建新的段落元素、标题元素和一段文本内容，并按照先后顺序添加到id=test的div元素内部的结尾处。//使用HTML代码创建段落元素varp=p段落元素/p;//使用JavaScript代码创建标题元素varh1=document.createElement(h1);h1.innerHTML=标题元素;//创建文本内容vartext=纯文本内容;//依次追加到id=test的div元素中$(div#test).append(p,[h1,text]);10.2.1jQueryappend()和prepend() 【例10-6】jQueryappend()和prepend()方法追加内容10.2.2jQueryafter()和before()jQueryafter()方法分别用于在选定元素之后加入新的内容。after()方法的语法格式如下：其中content参数的类型可以是文本、数组、HTML代码或元素标签。after(content[,content])10.2.2jQueryafter()和before()jQuerybefore()与after()方法的参数完全相同，只不过追加位置从指定元素之后变更为元素之前。before()方法的语法格式如下：before(content[,content])10.2.2jQueryafter()和before()1. 追加文本使用after()或before()方法添加文本内容允许带有格式化标签。例如下面这段HTML代码：pid=test这是测试用的段落元素/p10.2.2jQueryafter()和before()1. 追加文本对其使用jQueryafter()方法在该元素后面追加文本内容。相关jQuery代码如下：HTML代码片段更新如下：这段文本带有i格式化/i标签。$(p#test).append(这段文本带有i格式化/i标签。);pid=test这是测试用的段落元素/p10.2.2jQueryafter()和before()1. 追加文本如果换成使用before()方法追加文本内容，相关jQuery代码如下：HTML代码片段更新如下：$(div#test).before(这段文本带有i格式化/i标签。);这段文本带有i格式化/i标签。pid=test这是测试用的段落元素/p10.2.2jQueryafter()和before()2. 追加元素使用after()或before()方法添加新元素可以直接在参数位置填入相关HTML代码。以after()为例，添加一个新的段落元素p的方法如下：after(p这是一个段落元素。/p)10.2.2jQueryafter()和before()2. 追加元素例如以下情况：分别使用after()和before()查看效果。divid=test这是一个测试元素。/div10.2.2jQueryafter()和before()2. 追加元素使用jQueryafter()方法选定id=test的div元素，并在其后面追加段落元素。相关jQuery代码如下：HTML代码片段更新如下：divid=test这是一个测试元素。/divp这是一个段落元素。/p$(div#test).after(p这是一个段落元素。/p);10.2.2jQueryafter()和before()2. 追加元素如果换成使用before()方法追加元素，相关jQuery代码如下