jquery追加元素的几种方法(append()、prepend()、after()、before()、insertAfter()、insertBefore())
最近项目不是很忙,抽空整理了下,js中常用追加元素的几种方法。
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>js中常用追加元素的几种方法</title>
- <link rel="stylesheet" href="css/rest.css" />
- <style>
- .container {
- width: 1200px;
- padding: 10px;
- margin: 50px auto;
- border: 1px solid lightcoral;
- }
- #wrap{
- border: 1px solid lightseagreen;
- }
- .container p{
- height: 30px;
- line-height: 30px;
- }
- .btn-group{
- margin-top: 20px;
- }
- button{
- width: 80px;
- height: 32px;
- margin-right: 10px;
- line-height: 32px;
- text-align: center;
- border: 0px;
- }
- </style>
- </head>
- <body>
- <div class="container">
- <div id="wrap">
- <p class="first">我是第一个子元素</p>
- <p class="second">我是第二个子元素</p>
- </div>
- <div class="btn-group">
- <button class="append">append</button>
- <button class="appendTo">appendTo</button>
- <button class="prepend">prepend</button>
- <button class="prependTo">prependTo</button>
- <button class="after">after</button>
- <button class="before">before</button>
- <button class="appendChild" onclick="appChild()">appendChild</button>
- <button class="insertAfter">insertAfter</button>
- <button class="insertBefore">insertBefore</button>
- </div>
- </div>
- </body>
- </html>
- <script src="js/jquery-1.9.1.min.js"></script>
- <script>
- $(function(){
- //append(),在父级最后追加一个子元素
- $(".append").click(function(){
- $("#wrap").append("<p class='three'>我是子元素append</p>");
- });
- //appendTo(),将子元素追加到父级的最后
- $(".appendTo").click(function(){
- $("<p class='three'>我是子元素appendTo</p>").appendTo($("#wrap"));
- });
- //prepend(),在父级最前面追加一个子元素
- $(".prepend").click(function(){
- $("#wrap").prepend("<p class='three'>我是子元素prepend</p>");
- });
- //prependTo(),将子元素追加到父级的最前面
- $(".prependTo").click(function(){
- $("<p class='three'>我是子元素prependTo</p>").prependTo($("#wrap"));
- });
- //after(),在当前元素之后追加(是同级关系)
- $(".after").click(function(){
- $("#wrap").after("<p class='siblings'>我是同级元素after</p>");
- });
- //before(),在当前元素之前追加(是同级关系)
- $(".before").click(function(){
- $("#wrap").before("<p class='siblings'>我是同级元素before</p>");
- });
- //insertAfter(),将元素追加到指定对象的后面(是同级关系)
- $(".insertAfter").click(function(){
- $("<p class='three'>我是同级元素insertAfter</p>").insertAfter($("#wrap"));
- });
- //insertBefore(),将元素追加到指定对象的前面(是同级关系)
- $(".insertBefore").click(function(){
- $("<p class='three'>我是同级元素insertBefore</p>").insertBefore($("#wrap"));
- });
- });
- //appendChild(),在节点的最后追加子元素
- function appChild(){
- // 创建p节点
- var para=document.createElement("p");
- // 创建文本节点
- var node=document.createTextNode("我是子集appendChild新段落。");
- // 把文本节点添加到p节点里
- para.appendChild(node);
- // 查找div1
- var element=document.getElementById("wrap");
- // 把p节点添加到div1里
- element.appendChild(para);
- }
- </script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js中常用追加元素的几种方法</title>
<link rel="stylesheet" href="css/rest.css" />
<style>
.container {
width: 1200px;
padding: 10px;
margin: 50px auto;
border: 1px solid lightcoral;
}
#wrap{
border: 1px solid lightseagreen;
}
.container p{
height: 30px;
line-height: 30px;
}
.btn-group{
margin-top: 20px;
}
button{
width: 80px;
height: 32px;
margin-right: 10px;
line-height: 32px;
text-align: center;
border: 0px;
}
</style>
</head>
<body>
<div class="container">
<div id="wrap">
<p class="first">我是第一个子元素</p>
<p class="second">我是第二个子元素</p>
</div>
<div class="btn-group">
<button class="append">append</button>
<button class="appendTo">appendTo</button>
<button class="prepend">prepend</button>
<button class="prependTo">prependTo</button>
<button class="after">after</button>
<button class="before">before</button>
<button class="appendChild" onclick="appChild()">appendChild</button>
<button class="insertAfter">insertAfter</button>
<button class="insertBefore">insertBefore</button>
</div></div> </body>
</html>
<script src="js/jquery-1.9.1.min.js"></script>
<script>
$(function(){
//append(),在父级最后追加一个子元素
$(".append").click(function(){
$("#wrap").append("<p class='three'>我是子元素append</p>");
});//appendTo(),将子元素追加到父级的最后
$(".appendTo").click(function(){
$("<p class='three'>我是子元素appendTo</p>").appendTo($("#wrap"));
}); //prepend(),在父级最前面追加一个子元素
$(".prepend").click(function(){
$("#wrap").prepend("<p class='three'>我是子元素prepend</p>");
}); //prependTo(),将子元素追加到父级的最前面
$(".prependTo").click(function(){
$("<p class='three'>我是子元素prependTo</p>").prependTo($("#wrap"));
}); //after(),在当前元素之后追加(是同级关系)
$(".after").click(function(){
$("#wrap").after("<p class='siblings'>我是同级元素after</p>");
}); //before(),在当前元素之前追加(是同级关系)
$(".before").click(function(){
$("#wrap").before("<p class='siblings'>我是同级元素before</p>");
}); //insertAfter(),将元素追加到指定对象的后面(是同级关系)
$(".insertAfter").click(function(){
$("<p class='three'>我是同级元素insertAfter</p>").insertAfter($("#wrap"));
});
//insertBefore(),将元素追加到指定对象的前面(是同级关系)
$(".insertBefore").click(function(){
$("<p class='three'>我是同级元素insertBefore</p>").insertBefore($("#wrap"));
});
}); //appendChild(),在节点的最后追加子元素
function appChild(){
// 创建p节点
var para=document.createElement("p");
// 创建文本节点
var node=document.createTextNode("我是子集appendChild新段落。");
// 把文本节点添加到p节点里
para.appendChild(node); // 查找div1
var element=document.getElementById("wrap");
// 把p节点添加到div1里
element.appendChild(para);
}
</script>
以下是单击每个按钮之后的效果。
jquery追加元素的几种方法(append()、prepend()、after()、before()、insertAfter()、insertBefore())的更多相关文章
- js中常用追加元素的几种方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jq 追加元素的几种方法
jQuery添加插入元素技巧: jquery添加分为在指定元素的里面添加和外面添加两种: 里面添加使用(append 和prepend) 里面添加又分为在里面的前面添加和后面添加 里面的前面添加使用 ...
- 解析Jquery取得iframe中元素的几种方法
iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作,需要的朋友可以参考下 DOM方法:父窗口操作IFRAME:window.frames[&q ...
- Jquery取得iframe中元素的几种方法(转载)
iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作 DOM方法:父窗口操作IFRAME:window.frames["iframeSon ...
- [浪风转载]Jquery取得iframe中元素的几种方法
iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作 DOM方法:父窗口操作IFRAME:window.frames["iframeSon ...
- js 跨域 Jquery取得iframe中元素的几种方法
http://www.jb51.net/article/34942.htm 收集利用Jquery取得iframe中元素的几种方法 : 父页面访问子页面 $(document.getElementByI ...
- Jquery取得iframe中元素的几种方法Javascript Jquery获取Iframe的元素、内容或者ID
query取得iframe中元素的几种方法 在iframe子页面获取父页面元素代码如下: $('#objId', parent.document);// 搞定... 在父页面 获取iframe子页面的 ...
- jquery 操作iframe的几种方法总结
iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作 DOM方法: 父窗口操作IFRAME:window.frames["iframeSo ...
- python中List添加、删除元素的几种方法
一.python中List添加元素的几种方法 List 是 Python 中常用的数据类型,它一个有序集合,即其中的元素始终保持着初始时的定义的顺序(除非你对它们进行排序或其他修改操作).在Pytho ...
随机推荐
- 清北考前刷题day4早安
LI /* 没有考虑次大值有大于一个的情况 */ #include<iostream> #include<cstdio> #include<cstring> # ...
- 388 Longest Absolute File Path 最长的绝对文件路径
详见:https://leetcode.com/problems/longest-absolute-file-path/description/ C++: class Solution { publi ...
- HTML+CSS 基础布局(案列一)
刚html刚讲完马上就接着css,周末的任务就是高仿案例,结果有点遭 图文布局 代码 css(内部样式) html <!DOCTYPE html><html><head& ...
- Android RxJava2 浅析
原文地址:http://blog.csdn.net/maplejaw_/article/details/52442065 Observable 在RxJava1.x中,最熟悉的莫过于Observabl ...
- C/C++ char*、char[]
一.本质区别 char* s是一个保存字符串首地址的指针变量,char a[]是许多连续的内存单元,单元中的元素为char类型.之所以用char *能达到char []的效果,还是字符串的本质,即给你 ...
- HDU_1175_连连看
题目:http://acm.hdu.edu.cn/showproblem.php?pid=1175 大意:连连看规则,只能转两次弯,先输入矩阵0表示没有棋子,正整数表示不同的棋子,然后询问,输入两点坐 ...
- Robot Framework(九) 执行测试用例——基本用法
3.1基本用法 Robot Framework测试用例从命令行执行,默认情况下,最终结果是XML格式的输出文件和HTML 报告和日志.执行后,可以组合输出文件,然后使用rebot工具进行后处理. 3. ...
- STL源码分析之第二级配置器
前言 第一级是直接调用malloc分配空间, 调用free释放空间, 第二级三就是建立一个内存池, 小于128字节的申请都直接在内存池申请, 不直接调用malloc和free. 本节分析第二级空间配置 ...
- 03匿名内部类、eclipse快捷键、String相关知识
03匿名内部类.eclipse快捷键.String相关知识-2018.7.11 1.匿名内部类(只针对重写一个方法时候使用,不能向下转型,因为没有子类类名) new Inter(){ public v ...
- poj - 3254 - Corn Fields (状态压缩)
poj - 3254 - Corn Fields (状态压缩)超详细 参考了 @外出散步 的博客,在此基础上增加了说明 题意: 农夫有一块地,被划分为m行n列大小相等的格子,其中一些格子是可以放牧的( ...