最近项目不是很忙，抽空整理了下，js中常用追加元素的几种方法。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>js中常用追加元素的几种方法</title>
  6. <link rel="stylesheet" href="css/rest.css" />
  7. <style>
  8. .container {
  9. width: 1200px;
  10. padding: 10px;
  11. margin: 50px auto;
  12. border: 1px solid lightcoral;
  13. }
  14. #wrap{
  15. border: 1px solid lightseagreen;
  16. }
  17. .container p{
  18. height: 30px;
  19. line-height: 30px;
  20. }
  21. .btn-group{
  22. margin-top: 20px;
  23. }
  24. button{
  25. width: 80px;
  26. height: 32px;
  27. margin-right: 10px;
  28. line-height: 32px;
  29. text-align: center;
  30. border: 0px;
  31. }
  32. </style>
  33. </head>
  34. <body>
  35. <div class="container">
  36. <div id="wrap">
  37. <p class="first">我是第一个子元素</p>
  38. <p class="second">我是第二个子元素</p>
  39. </div>
  40. <div class="btn-group">
  41. <button class="append">append</button>
  42. <button class="appendTo">appendTo</button>
  43. <button class="prepend">prepend</button>
  44. <button class="prependTo">prependTo</button>
  45. <button class="after">after</button>
  46. <button class="before">before</button>
  47. <button class="appendChild" onclick="appChild()">appendChild</button>
  48. <button class="insertAfter">insertAfter</button>
  49. <button class="insertBefore">insertBefore</button>
  50. </div>
  51. </div>
  52. </body>
  53. </html>
  54. <script src="js/jquery-1.9.1.min.js"></script>
  55. <script>
  56. $(function(){
  57. //append(),在父级最后追加一个子元素
  58. $(".append").click(function(){
  59. $("#wrap").append("<p class='three'>我是子元素append</p>");
  60. });
  61. //appendTo(),将子元素追加到父级的最后
  62. $(".appendTo").click(function(){
  63. $("<p class='three'>我是子元素appendTo</p>").appendTo($("#wrap"));
  64. });
  65. //prepend(),在父级最前面追加一个子元素
  66. $(".prepend").click(function(){
  67. $("#wrap").prepend("<p class='three'>我是子元素prepend</p>");
  68. });
  69. //prependTo(),将子元素追加到父级的最前面
  70. $(".prependTo").click(function(){
  71. $("<p class='three'>我是子元素prependTo</p>").prependTo($("#wrap"));
  72. });
  73. //after(),在当前元素之后追加（是同级关系）
  74. $(".after").click(function(){
  75. $("#wrap").after("<p class='siblings'>我是同级元素after</p>");
  76. });
  77. //before(),在当前元素之前追加（是同级关系）
  78. $(".before").click(function(){
  79. $("#wrap").before("<p class='siblings'>我是同级元素before</p>");
  80. });
  81. //insertAfter(),将元素追加到指定对象的后面（是同级关系）
  82. $(".insertAfter").click(function(){
  83. $("<p class='three'>我是同级元素insertAfter</p>").insertAfter($("#wrap"));
  84. });
  85. //insertBefore(),将元素追加到指定对象的前面（是同级关系）
  86. $(".insertBefore").click(function(){
  87. $("<p class='three'>我是同级元素insertBefore</p>").insertBefore($("#wrap"));
  88. });
  89. });
  90. //appendChild(),在节点的最后追加子元素
  91. function appChild(){
  92. // 创建p节点
  93. var para=document.createElement("p");
  94. // 创建文本节点
  95. var node=document.createTextNode("我是子集appendChild新段落。");
  96. // 把文本节点添加到p节点里
  97. para.appendChild(node);
  98. // 查找div1
  99. var element=document.getElementById("wrap");
  100. // 把p节点添加到div1里
  101. element.appendChild(para);
  102. }
  103. </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>

	&lt;/div&gt;

&lt;/body&gt;




</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(){

		$("&lt;p class='three'&gt;我是子元素appendTo&lt;/p&gt;").appendTo($("#wrap"));

	});

	//prepend(),在父级最前面追加一个子元素

	$(".prepend").click(function(){

		$("#wrap").prepend("&lt;p class='three'&gt;我是子元素prepend&lt;/p&gt;");

	});

	//prependTo(),将子元素追加到父级的最前面

	$(".prependTo").click(function(){

		$("&lt;p class='three'&gt;我是子元素prependTo&lt;/p&gt;").prependTo($("#wrap"));

	});

	//after(),在当前元素之后追加（是同级关系）

	$(".after").click(function(){

		$("#wrap").after("&lt;p class='siblings'&gt;我是同级元素after&lt;/p&gt;");

	});

	//before(),在当前元素之前追加（是同级关系）

	$(".before").click(function(){

		$("#wrap").before("&lt;p class='siblings'&gt;我是同级元素before&lt;/p&gt;");

	});

	//insertAfter(),将元素追加到指定对象的后面（是同级关系）

	$(".insertAfter").click(function(){

		$("&lt;p class='three'&gt;我是同级元素insertAfter&lt;/p&gt;").insertAfter($("#wrap"));

	});

	//insertBefore(),将元素追加到指定对象的前面（是同级关系）

	$(".insertBefore").click(function(){

		$("&lt;p class='three'&gt;我是同级元素insertBefore&lt;/p&gt;").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()）的更多相关文章

  1. js中常用追加元素的几种方法

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. jq 追加元素的几种方法

    jQuery添加插入元素技巧: jquery添加分为在指定元素的里面添加和外面添加两种: 里面添加使用(append 和prepend) 里面添加又分为在里面的前面添加和后面添加 里面的前面添加使用 ...

  3. 解析Jquery取得iframe中元素的几种方法

    iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作,需要的朋友可以参考下   DOM方法:父窗口操作IFRAME:window.frames[&q ...

  4. Jquery取得iframe中元素的几种方法（转载）

    iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作 DOM方法:父窗口操作IFRAME:window.frames["iframeSon ...

  5. [浪风转载]Jquery取得iframe中元素的几种方法

    iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作 DOM方法:父窗口操作IFRAME:window.frames["iframeSon ...

  6. js 跨域 Jquery取得iframe中元素的几种方法

    http://www.jb51.net/article/34942.htm 收集利用Jquery取得iframe中元素的几种方法 : 父页面访问子页面 $(document.getElementByI ...

  7. Jquery取得iframe中元素的几种方法Javascript Jquery获取Iframe的元素、内容或者ID

    query取得iframe中元素的几种方法 在iframe子页面获取父页面元素代码如下: $('#objId', parent.document);// 搞定... 在父页面 获取iframe子页面的 ...

  8. jquery 操作iframe的几种方法总结

    iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作 DOM方法: 父窗口操作IFRAME:window.frames["iframeSo ...

  9. python中List添加、删除元素的几种方法

    一.python中List添加元素的几种方法 List 是 Python 中常用的数据类型,它一个有序集合,即其中的元素始终保持着初始时的定义的顺序(除非你对它们进行排序或其他修改操作).在Pytho ...

随机推荐

  1. codevs1669（dfs）子集和目标值

    1692 子集和的目标值  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond   题目描述 Description 给定n个整数in和目标值T,求某一非空子集 ...

  2. QRCoder生成二维码

    现在二维码支付越来越流行,二维码使用的地方越来越多,项目中也需要一个二维码生成工具,QRCoder是一个简单的生成二维码的库,用C#.NET编写,他是开源的MIT-license. 二维码简介 二维条 ...

  3. sql 数据库建表

    1. 需求 打分和备注是两条记录显示,打分和备注应该放到一张里面吗?放到一张表里面,展示好一些,自己一张表搞定,如果再创建一张表存储备注,需要union all 来进行关联, 感觉性能上有些影响,但是 ...

  4. [笔试面试题] 10-C和C++区别相关

    1 C和C++有什么不同? 机制不同:C是面向过程的(但C也可以编写面向对象的程序):C++是面向对象的,提供了类.但是,C++编写面向对象的程序比C容易. 适用领域不同:C适合要求代码体积小的,效率 ...

  5. BFS POJ 2251 Dungeon Master

    题目传送门 /* BFS:这题很有意思,像是地下城,图是立体的,可以从上张图到下一张图的对应位置,那么也就是三维搜索,多了z坐标轴 */ #include <cstdio> #includ ...

  6. 递推DP Codeforces Round #260 (Div. 1) A. Boredom

    题目传送门 /* DP:从1到最大值,dp[i][1/0] 选或不选,递推更新最大值 */ #include <cstdio> #include <algorithm> #in ...

  7. ASP.NET MVC应用程序中支持用户使用腾讯QQ和微信以及新浪微博的第三方登录

    什么是第三方授权登录,就是一些大家都会有的帐号如QQ.微信.淘宝.微博等账户.通过那些巨头公司提供的api直接实现登录. 当然,我们是不可能得到你的用户名和密码的.不了解的人,可能会存在这个疑虑.我们 ...

  8. web项目无法部署到eclipse配置的本地tomcat

    一.发现问题 在eclipse中新建Dynamic Web Project,配置好本地的tomcat并写好代码后选择Run on Server,但运行后发现在tomcat的安装目录下的webapps并 ...

  9. .net面试题 2016

    经典面试题2016——50题 1.面向对象语言具有——继承性——,——封装性——,——多态性—— 继承性:就是让一个类型的对象拥有另一个类型的对象的属性的方法.继承后,子类拥有父类的属性和方法. 封装 ...

  10. URI URL URN的区别

    一:什么是URI,URL,URN ? URI:Uniform Resource Identifier,统一资源标识符,是一个用于表示互联网上资源名称的字符串 格式:http://www.xxx.com ...