还有其他类似方法,以后再加,直接上代码和图
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <style> div{ border:1px solid black; } #div1{ height:100px; width:100px; background-color:red; } #div2{ height:50px; width:50px; background-color:yellow; } </style> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript"> function append1(){ $("#div1").append($("#div2")); } function prependTo1(){ $("#div2").prependTo($("#div1")); } function after1(){ $("#div1").after($("#div2")); } </script> </head> <body> <div id="div1">div1</div> --分割线-- <div id="div2">div2</div> <input type="button" value="append" onclick="append1();"></input> <input type="button" value="prependTo" onclick="prependTo1();"></input> <input type="button" value="after" onclick="after1();"></input> </body> </html>
`页面初始化
·append
·prependTo
·after
相关推荐
<script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); </script> </head> ...
例如,`$("p").append("<b>Hello</b>");`将在所有段落的末尾添加加粗的"Hello"。 - `appendTo(content)`:与`append`相反,将所有匹配的元素追加到另一个指定的元素中。例如,`$("p").appendTo("div");`将所有段落...
在深入探讨jQuery选择器及其应用之前,我们先简要回顾一下jQuery是什么。jQuery是一个快速、简洁的JavaScript库,它的设计宗旨是“写得更少,做得更多”。它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互,...
- `$("div").append("<p>追加的p标签</p>")`: 在每个匹配的`<div>`元素中追加一个新的`<p>`元素。 - `$("p").appendTo("#content")`: 将每个匹配的`<p>`元素追加到ID为`content`的元素中。 - `$("p").prepend("<span...
例如:`$("div").append("<span>New Content</span>");` 在每个 `<div>` 的末尾添加新内容。 - **`appendTo(content)`** 把匹配元素添加到另一个指定的元素集合的末尾。例如:`$("span").appendTo("#container");...
var div = $("<div class='box'>这是一个通过 jQuery 动态添加的 div</div>"); ``` 2. **jQuery节点的插入** - **内部插入**:`append()`和`appendTo()`用于在元素内部添加内容。它们的主要区别在于调用方式,`...
对于内部操作(`append`, `prepend`, `appendTo`, `prependTo`),它们的主要区别在于插入内容的位置(元素的末尾或开头),而对于外部操作(`after`, `before`, `insertAfter`, `insertBefore`),区别在于内容与...
### JQuery 常用方法一览 #### 一、Attribute 相关操作 1. **`.addClass()`** - **用途**:为元素添加一个或多个类名。 - **示例**:`$("p").addClass("css样式");` - 为所有 `<p>` 元素添加一个名为 `css样式`...
### jQuery入门2知识点详解 #### 一、课程概述 本课程为**jQuery入门2**,主要面向零基础的初学者,旨在通过详细易懂的教学帮助学员掌握jQuery的基础使用及一些高级功能。通过本课程的学习,学员能够理解并运用...
通过以上介绍,可以看出 jQuery 是一个非常强大且实用的前端工具库,极大地简化了 JavaScript 编程工作,并提供了一系列方便快捷的方法来处理 DOM 操作、事件处理、动画以及 Ajax 等任务。对于前端开发者来说,掌握 ...
- **导入js库**:在HTML文件中通过`<script>`标签引入jQuery库,推荐使用压缩版的`<script src="js/jquery-1.11.3.min.js"></script>`,完整版为`<script src="js/jquery-1.11.3.js"></script>`。 - **页面载入...
插入节点分为多种方式:`append()`和`appendTo()`用于在元素末尾添加内容,`prepend()`和`prependTo()`用于在元素开头添加,`after()`和`insertAfter()`在元素后插入,`before()`和`insertBefore()`在元素前插入。...
- **示例**:`$("p").wrap("<div class='wrapper'></div>")`将所有`<p>`元素包裹在一个带有`wrapper`类的`<div>`元素中。 #### 三、Traversing(遍历操作) **3.1 add** ```javascript add(expr) add(html) add...
- **示例**: 若要在所有`<p>`标签后插入一个新的`<p>`标签,可以使用`$("p").after("<p>新内容</p>");` **2.2 `append`** - **功能**: 在每个匹配元素的末尾添加内容。 - **语法**: `$("元素名称").append("新内容...
jQuery为开发者提供了多种方便的方法来处理元素,其中append、prepend、before和after方法是我们在日常开发中经常使用的操作,它们用于在现有元素的前后或者内部添加内容。下面将对这些方法的用法及其区别进行详细...
dom操作主要包括append、prepend、before、after、replaceWith、appendTo、prependTo、insertBefore、insertAfter、replaceAll。其核心处理函数是domManip,本文给大家介绍Jquery-1.9.1源码分析系列(十一)之DOM...
- **示例**:`$("div").append("<p>Hello World</p>")`,在每个`<div>`内部的末尾添加一个`<p>`标签。 3. **`appendTo()`** - **用途**:把每个匹配元素移到另一个已存在的元素的末尾。 - **语法**:`$(...
$("p").after("<span>新的内容</span>"); ``` 2. **`.append()`** - **用途**:向被选元素的末尾添加指定的内容。 - **示例**: ```javascript $("div").append("<p>新的段落</p>"); ``` 3. **`.appendTo()...
在使用jQuery进行DOM操作时,append、prepend、before和after方法是经常使用的,它们可以帮助开发者以不同的方式动态地修改页面内容。同时,appendTo、prependTo、insertBefore和insertAfter则是对应的以元素为目标...