jQuery 创建和插入元素
一、使用jQuery创建元素
1、创建元素
$(function(){
var $h1=$(“<h1></h1>”);
$(“body”).append($h1);
})2、创建文本
$(function(){
var $h1=$(“<h1>DOM文档对象模型</h1>”);
$(“body”).append($h1);
})3、创建属性
$(function(){
var $h1=$(“<h1 title=“一级标题” class=“red”>DOM文档对象模型</h1>”);
$(“body”).append($h1);
})二、使用jQuery插入元素
1、在节点内部插入内容
（1）、append()方法在被选元素的结尾（仍然在内部）插入指定内容
提示：append() 和 appendTo() 方法执行的任务相同。不同之处在于：内容的位置和选择器。
语法：$(selector).append(content)
content必需。规定要插入的内容（可包含 HTML 标签）。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){$("button").click(function(){$("p").append(" <b>Hello world!</b>");});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>在每个 p 元素的结尾添加内容</button>
</body>
</html>
使用函数来附加内容，使用函数在指定元素的结尾插入内容。
语法：$(selector).append(function(index,html))
function(index,html) 必需。规定返回待插入内容的函数。
index - 可选。接收选择器的 index 位置。
html - 可选。接收选择器的当前 HTML。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){$("button").click(function(){$("p").append(function(n){return "<b>This p element has index " + n + "</b>";});});
});
</script>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>在每个 p 元素的结尾添加内容</button>
</body>
</html>
（2）、appendTo()方法在被选元素的结尾（仍然在内部）插入指定内容
提示：append() 和 appendTo() 方法执行的任务相同。不同之处在于：内容和选择器的位置，以及 append() 能够使用函数来附加内容。
语法：$(content).appendTo(selector)
content必需。规定要插入的内容（可包含 HTML 标签）。
selector必需。规定把内容追加到哪个元素上。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){$("button").click(function(){$("<b> Hello World!</b>").appendTo("p");});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>在每个 p 元素的结尾添加内容</button>
</body>
</html>
（3）、prepend() 方法在被选元素的开头（仍位于内部）插入指定内容
提示：prepend() 和 prependTo() 方法作用相同。差异在于语法：内容和选择器的位置，以及 prependTo() 无法使用函数来插入内容。
语法：$(selector).prepend(content)
content必需。规定要插入的内容（可包含 HTML 标签）。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){$("button").click(function(){$("p").prepend("<b>Hello world!</b> ");});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>在每个 p 元素的开头插入内容</button>
</body>
</html>
使用函数来附加内容，使用函数在被选元素的开头插入指定的内容。
语法：$(selector).prepend(function(index,html))
function(index,html) 必需。规定返回待插入内容的函数。
index - 可选。接受选择器的 index 位置。
html - 可选。接受选择器的当前 HTML。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){$("button").click(function(){$("p").prepend(function(n){return "<b>这个 p 元素的 index 是：" + n + "</b> ";});});
});
</script>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>在每个 p 元素的开头插入内容</button>
</body>
</html>
（4）、prependTo() 方法在被选元素的开头（仍位于内部）插入指定内容
提示：prepend() 和 prependTo() 方法作用相同。差异在于语法：内容和选择器的位置，以及 prepend() 能够使用函数来插入内容。
语法：$(content).prependTo(selector)
content 必需。规定要插入的内容（可包含 HTML 标签）。
selector 必需。规定在何处插入内容。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){$(".btn1").click(function(){$("<b>Hello World!</b>").prependTo("p");});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">在每个 p 元素的开头插入文本</button>
</body>
</html>
2、在节点外部插入内容
（1）、after() 方法在被选元素后插入指定的内容
语法：$(selector).after(content)
content必需。规定要插入的内容（可包含 HTML 标签）。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){$("button").click(function(){$("p").after("<p>Hello world!</p>");});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>在每个 p 元素后插入内容</button>
</body>
</html>
使用函数来插入内容，使用函数在被选元素之后插入指定的内容。
语法：$(selector).after(function(index))
function(index) 必需。规定返回待插入内容的函数。
index - 可选。接收选择器的 index 位置。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){$("button").click(function(){$("p").after(function(n){return "<p>The p element above has index " + n + "</p>";});});
});
</script>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>在每个 p 元素后插入内容</button>
</body>
</html>
（2）、before() 方法在被选元素前插入指定的内容
语法：$(selector).before(content)
content 必需。规定要插入的内容（可包含 HTML 标签）。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){$(".btn1").click(function(){$("p").before("<p>Hello world!</p>");});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">在每个段落前面插入新的段落</button>
</body>
</html>
使用函数来插入内容，使用函数在指定的元素前面插入内容。
语法：$(selector).before(function(index))
function(index)必需。规定返回待插入内容的函数。
index - 可选。接收选择器的 index 位置。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){$("button").click(function(){$("p").before(function(n){return "<p>The p element below has index " + n + "</p>";});});
});
</script>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">在每个段落前面插入新的段落</button>
</body>
</html>
（3）、insertAfter()把匹配的元素插入到另一个指定的元素集合的后面
注释：如果该方法用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之后。
语法：$(content).insertAfter(selector)
content必需。规定要插入的内容。可能的值：选择器表达式、HTML 标记
selector必需。规定在何处插入被选元素。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){$("button").click(function(){$("<span>你好！</span>").insertAfter("p");});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>在每个 p 元素之后插入 span 元素</button>
</body>
</html>
插入已有的元素
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){$("button").click(function(){$("h1").insertAfter("p");});
});
</script>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>在每个 p 元素之后插入 h1 元素</button>
</body>
</html>
（4）、insertBefore()把匹配的元素插入到另一个指定的元素集合的前面
注释：如果该方法用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之前。
语法：$(content).insertBefore(selector)
content 必需。规定要插入的内容。可能的值：选择器表达式、HTML 标记
selector 必需。规定在何处插入被选元素。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){$("button").click(function(){$("<span>你好！</span>").insertBefore("p");});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>在每个 p 元素之前插入 span 元素</button>
</body>
</html>
jQuery 创建和插入元素相关推荐
- jquery的DOM节点操作(创建和插入元素节点)
1.创建元素节点 2.插入节点 动态创建新元素节点后,需要执行插入或追加操作,否则不会在页面显示出来. 按照元素的层次关系来分,可以分为内部和外部两种方法 元素内部插入子节点 元素内部插入子节点有两种 ...
- jQuery方法之插入元素
jQuery方法之append,appendTo和prepend,prependTo append:在每个匹配元素里面的末尾处插入参数内容.(内部插入)---向后插入 语法:$(selector).a ...
- jQuery创建页面元素
创建元素三种方式 使用HTML标签创建 var txt1="<p>文本</p>"; 使用DOM创建 var txt2=document.createElem ...
- python列表元素替换的数据结构_Python基础学习数据结构（第2讲：列表；第2讲：列表创建、添加元素、插入元素、替换元素、删除元素、其他常用方法和列表派生）,第二,主讲,追加,推导,式...
列表也是一种序列结构,与元组不同,列表具有可变性,可以追加.插入.删除和替换列表中的元素. 1.创建列表 创建列表可以使用list([iterable])函数,或者用中括号[ ]将元素括起来,元素之间 ...
- 单链表的初始化，整表创建，单个元素插入，单个元素删除，整表删除等操作...
很早之前学的数据结构,放了很久后,以致对里面的一些操作都有些遗忘,故而再次温习了一下数据结构,并整理了一点儿笔记,放在这里和大家分享, 我的代码注释的已经很详细了,对于容易出错的地方我也都有标注,欢迎 ...
- 属性 元素的内容 创建，插入和删除节点 虚拟节点
属性 html元素由一个标签和一组称为属性的名/值对组成. HTML 表示HTML文档元素的HTMLElement对象定义了读/写属性.映射了元素的HTML属性.HTMLElement定义了通用的HT ...
- html——原生js与jquery创建元素节点区别
学习完静态样式之后开始学习动态创建添加html元素,总结了下原生js与jquery生成元素区别. 1.javascript创建元素 创建select var select = document.cre ...
- jQuery 学习-DOM篇（一）：jQuery 创建元素并添加属性
推荐阅读 Helm3(K8S 资源对象管理工具)视频教程:https://edu.csdn.net/course/detail/32506 Helm3(K8S 资源对象管理工具)博客专栏:https: ...
- C语言创建顺序表并插入元素 详细注释
顺序表是用一组地址连续的存储单元依次存储数据元素的数据结构.顺序表是线性表的一种,线性表是最常用且最简单的一种数据结构,一个线性表是 n 个数据元素的有限序列.我们使用 c 语言来创建顺序表并插入元素 ...
最新文章
- 4. 连续时间鞅（REN）
- 成功解决AttributeError: module ‘seaborn‘ has no attribute ‘lvplot‘
- debian 访问 windows 共享_【续】windows环境redis未授权利用方式梳理
- tensorflow中GPU的设置
- atom对比 vscode_VS Code、ATOM这些开源文本编辑器的代码实现中有哪些奇技淫巧？...
- @font-face的用法,css3使用web字体教程
- 谷歌再次修复已遭利用的两枚高危0day (CVE-2020-16009/16010)
- Android商品详情页上拉查看详情
- CSS 字体加粗，导致布局宽度改变怎么处理？
- Spring Boot layered(分层) jar 构建docker镜像
- SWUST OJ312: 偷菜
- unpivot行转列 oracle,oracle-行转列点评oracle11g sql新功能pivot/unpivot
- 局部敏感哈希-Locality Sensitivity Hashing
- 计挑赛初赛试题(2020)(一)
- 光纤HDMI线不再脆弱，开博尔铠装HDMI光纤抗拖拽
- HAL 库中 GPIO 工作模式配置（H7）
- 公交充值之——北京一卡通过期延期操作
- 全网最详细的Gephi安装与使用教程
- 引入第三方图标库，并在前台罗列图标
- Windows命令行用法
热门文章
- 上传文件.HttpMediaTypeNotSupportedException:Content type ‘multipart/form-data；
- 一场环境为“保姆级”的智能车竞赛
- 人工神经网络有哪些模型,神经网络属于什么模型
- 学习嵌入式要考研吗？
- Java后台数据自动备份的实现
- mysql查询前20条数据_SQL查询排序后前20条语句
- RStudio安装包时报错：Package LibPath Version Priority Depends Imports LinkingTo Suggests Enhances OS_
- 【基础教程】Matlab实现等高线图
- 明尼苏达量表结果分析_明尼苏达多项人格测验(MMPI) 结果分析
- 511遇见易语言API模块线程挂起(SuspendThread)