1. 内部插入

将新建元素插入到目标元素的内部

函数名	参数	调用方	描述
append	新建的 DOM 字符串	目标 jQuery 核心对象	插入到目标元素最后
prepend	新建的 DOM 字符串	目标 jQuery 核心对象	插入到目标元素最前
appendTo	目标 jQuery核心对象	新建的 jQuery 核心对象	插入到目标元素最后
prependTo	目标 jQuery核心对象	新建的 jQuery 核心对象	插入到目标元素最前

append 和 appendTo 功能是一样的，只不过调用对象和参数换了个位置，prepend，prependTo 同理

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>jQuery</title><style>div {width: 200px;height: 200px;border: 1px solid black;}</style></head><body><div><p>原来的内容</p></div><div><p>原来的内容</p></div><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script><script>// append 和 prepend 使用时语法是目标元素在前，新建元素在后let firstDiv = $('div:first-of-type')firstDiv.append('<p>append 添加的元素</p>') // 插入到目标元素内部末尾firstDiv.prepend('<p>prepend 添加的元素</p>') // 插入到目标元素内部头部// appendTo 和 prependTo 使用时语法是新建元素在前，目标元素在后let lastDiv = $('div:last-of-type')$('<p>appendTo 添加的元素</p>').appendTo(lastDiv) // 插入到目标元素内部末尾$('<p>prependTo 添加的元素</p>').prependTo(lastDiv) // 插入到目标元素内部头部</script></body>
</html>

2. 外部插入

将新建元素插入到目标元素的外部

函数名	参数	调用方	描述
before	新建的 DOM 字符串	目标 jQuery 核心对象	插入到目标元素前面
after	新建的 DOM 字符串	目标 jQuery 核心对象	插入到目标元素后面
insertBefore	目标 jQuery核心对象	新建的 jQuery 核心对象	插入到目标元素前面
insertAfter	目标 jQuery核心对象	新建的 jQuery 核心对象	插入到目标元素后面

before 和 insertBefore 功能是一样的，只不过调用对象和参数换了个位置，after，insertAfter 同理

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>jQuery</title><style>div {width: 200px;height: 200px;border: 1px solid black;}</style></head><body><div>原来的内容</div><br /><br /><br /><div>原来的内容</div><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script><script>// before 和 after 使用时语法是目标元素在前，新建元素在后let firstDiv = $('div:first-of-type')firstDiv.before('<p>before 添加的元素</p>') // 插入到目标元素前面firstDiv.after('<p>after 添加的元素</p>') // 插入到目标元素后面// insertBefore 和 insertAfter 使用时语法是新建元素在前，目标元素在后let lastDiv = $('div:last-of-type')$('<p>insertBefore 添加的元素</p>').insertBefore(lastDiv) // 插入到目标元素前面$('<p>insertAfter 添加的元素</p>').insertAfter(lastDiv) // 插入到目标元素后面</script></body>
</html>

3. 清空元素内容

清空目标元素内部的所有文本及子元素

函数名	参数	所属
empty	无	jQuery 核心对象

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>jQuery</title><style>.container {width: 100px;height: 100px;border: 1px solid black;}</style></head><body><div class="container"><p>这个会被删除</p></div><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script><script>$('div').empty()</script></body>
</html>

4. 克隆元素

克隆目标元素及子元素

函数名	参数	所属
clone	布尔值（是否克隆元素事件）	jQuery 核心对象

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>jQuery</title><style>.container {width: 100px;height: 100px;border: 1px solid black;}</style></head><body><div class="container"></div><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script><script>// 原DIVlet source = $('div:first-of-type')source.click(() => {alert('点击事件')})// 复制的DIV，clone(true) 会复制元素事件$('div:first-of-type').after(source.clone(true))</script></body>
</html>

jQuery Api 学习（六、jQuery 文档 - 操作文档）相关推荐

javascript与jQuery对照学习总结(一)(一些常规操作)
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>javascrip ...
清软英泰plm服务器安装文档,操作文档集合 (安装和管理 AnswerBook2 服务器 - zh)
操作文档集合 AnswerBook2 集合是一个逻辑书组.例如,您可有一个包括所有 SolarisTM 面向开发者的书的集合.此集合可能是一个 AnswerBook2 (SGML) 集合或一个 An ...
JQUERY插件学习之jQuery UI
jQuery UI:http://jqueryui.com/ jQuery UI介绍: jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互 ...
jQuery api学习笔记
jQuery事件各种事件类似点击事件 <html><head> <title>index.jsp</title><script type=&qu ...
ajax怎么实现回调,jQuery API学习之ajax与回调对象篇
jQuery ajax 实例讲解 [$.get() 定义和用法] get()方法通过远程HTTP GET请求载入信息.这是一个简单的GET请求功能以取代$.ajax.请求成功是可调用回调函数.如果需要 ...
Java数据持久层框架 MyBatis之API学习六（Mapper XML 文件详解）
对于MyBatis的学习而言,最好去MyBatis的官方文档:http://www.mybatis.org/mybatis-3/zh/index.html 对于语言的学习而言,马上上手去编程,多多练习 ...
Google Map API 学习六-设置infoWindow的长宽
转载于:https://www.cnblogs.com/MyFlora/p/3156516.html
JQuery选择器学习总结JQuery选择器
一.选择器的种类 1.根据获取页面中元素的不同,分为基本选择器,层次选择器,过滤选择器,表单选择器四大类. 2.过滤选择器:简单过滤选择器.内容过滤选择器.可见性过滤选择器.属性过滤选择器.子元素过 ...
jQuery 属性，css，文档操作
dom对象与jQuery对象的区别 $(function() {// dom 与 jQuery对象间的转换var $txt = $(":input");// jQuery -> ...

jQuery Api 学习（六、jQuery 文档 - 操作文档）

文章目录

1. 内部插入

2. 外部插入

3. 清空元素内容

4. 克隆元素

jQuery Api 学习（六、jQuery 文档 - 操作文档）相关推荐

最新文章

热门文章