jQueryDom操作之内部插入节点

最新推荐文章于 2019-04-16 17:46:02 发布
最新推荐文章于 2019-04-16 17:46:02 发布
阅读量837 收藏
点赞数
分类专栏： Jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/world_java/article/details/9626975
版权

1.append(content) :向每个匹配的元素的内部的结尾处追加内容


2.appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处


3.prepend(content):向每个匹配的元素的内部的开始处插入内容


4.prependTo(content) :将每个匹配的元素插入到指定的元素内部的开始处



练习：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript"  src="../js/jquery-1.10.2.js"></script>
<title>无标题文档</title>

<style type="text/css">
<!--

BODY
{
	font-family:Courier;;
	font-size: 12px;
	margin:0px 0px 0px 0px;
	overflow-x:no;
	overflow-y:no;
	background-color: #B8D3F4;
}
td
{
	font-size:12px;
}
.default_input
{
	border:1px solid #666666;
	height:18px;
	font-size:12px;
}
.default_input2
{
	border:1px solid #666666;
	height:18px;
	font-size:12px;
}
.nowrite_input
{
	border:1px solid #849EB5;
	height:18px;
	font-size:12px;
	background-color:#EBEAE7;
	color: #9E9A9E;
}
.default_list
{
	font-size:12px;
  border:1px solid #849EB5;
}
.default_textarea
{
	font-size:12px;
	border:1px solid #849EB5;
}

.nowrite_textarea
{
	border:1px solid #849EB5;
	font-size:12px;
	background-color:#EBEAE7;
	color: #9E9A9E;
}

.wordtd5 {
	font-size: 12px;
	text-align: center;
	vertical-align:top;
	padding-top: 6px;
	padding-right: 5px;
	padding-bottom: 3px;
	padding-left: 5px;
	background-color: #b8c4f4;
}

.wordtd {
	font-size: 12px;
	text-align: left;
	vertical-align:top;
	padding-top: 6px;
	padding-right: 5px;
	padding-bottom: 3px;
	padding-left: 5px;
	background-color: #b8c4f4;
}
.wordtd_1 {
	font-size: 12px;
	vertical-align:top;
	padding-top: 6px;
	padding-right: 5px;
	padding-bottom: 3px;
	padding-left: 5px;
	background-color: #516CD6;
	color:#fff;
}
.wordtd_2{
	font-size: 12px;
	text-align: right;
	vertical-align:top;
	padding-top: 6px;
	padding-right: 5px;
	padding-bottom: 3px;
	padding-left: 5px;
	background-color: #64BDF9;
}
.wordtd_3{
	font-size: 12px;
	text-align: right;
	vertical-align:top;
	padding-top: 6px;
	padding-right: 5px;
	padding-bottom: 3px;
	padding-left: 5px;
	background-color: #F1DD34;
}
.inputtd
{
	font-size:12px;
	vertical-align:top;
	padding-top: 3px;
	padding-right: 3px;
	padding-bottom: 3px;
	padding-left: 3px;
}
.inputtd2
{
	text-align: center;
	font-size:12px;
	vertical-align:top;
	padding-top: 3px;
	padding-right: 3px;
	padding-bottom: 3px;
	padding-left: 3px;
}
.tablebg
{
	font-size:12px;
}

.tb{
	border-collapse: collapse;
	border: 1px outset #999999;
	background-color: #FFFFFF;
}
.td2{line-height:22px; text-align:center; background-color:#F6F6F6;}
.td3{background-color:#B8D3F4; text-align:center; line-height:20px;}
.td4{background-color:#F6F6F6;line-height:20px;}
.td5{border:#000000 solid;
       border-right-width:0px;
	   border-left-width:0px;
	   border-top-width:0px;
	   border-bottom-width:1px;}

.tb td{
font-size: 12px;
border: 2px groove #ffffff;
}




.noborder {
	border: none;
}

.button {
	border: 1px ridge #ffffff;
	line-height:18px;
	height: 20px;
	width: 45px;
	padding-top: 0px;
	background:#CBDAF7;
	color:#000000;
	font-size: 9pt;
    font-family:Courier;;
} 

.textarea {
	font-family: Arial, Helvetica, sans-serif, "??";
	font-size: 9pt;
	color: #000000;
	border-bottom-width: 1px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-bottom-color: #000000;
	background-color:transparent;
	text-align: left
}
-->
</style></head>

<body>

<div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:200px; background-color:#E6E6E6;">
<table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">
  <tr>
    <td width="126">
    	<!--multiple="multiple" 能同时选择多个   size="10"  确定下拉选的长度-->
		<select name="first" size="10" multiple="multiple" class="td3" id="first">
		  <option value="选项1">选项1</option>
		  <option value="选项2">选项2</option>
		  <option value="选项3">选项3</option>
		  <option value="选项4">选项4</option>
		  <option value="选项5">选项5</option>
		  <option value="选项6">选项6</option>
		  <option value="选项7">选项7</option>
		  <option value="选项8">选项8</option>
		</select>    
	</td>
    <td width="69" valign="middle">
       <input name="add"  id="add" type="button" class="button" value="-->" /> 
       <input name="add_all" id="add_all" type="button" class="button" value="==>" /> 
       <input name="remove"  id="remove" type="button" class="button" value="<--" />
	   <input name="remove_all" id="remove_all" type="button" class="button" value="<==" />
        </td>
    <td width="127" align="left">
	  <select name="second" size="10" multiple="multiple" class="td3" id="second">
         <option value="选项9">选项9</option>
      </select>
	</td>
  </tr>
</table>
</div>
</body>
  <script type="text/javascript">
  	//<select name="first" size="10" multiple="multiple" class="td3" id="first">
	// <select name="second" size="10" multiple="multiple" class="td3" id="second">
/**************************************************************************************************/	
	//左边选中的移植到右边
	// <input name="add"  id="add" type="button" class="button" value="-->" /> 
	
/**************************************************************************************************/
   //左边的全部移植到右边
   // <input name="add_all" id="add_all" type="button" class="button" value="==>" /> 
	  
/**************************************************************************************************/
//左边双击的 移植到右边

//<input name="remove"  id="remove" type="button" class="button" value="<--" />
//<input name="remove_all" id="remove_all" type="button" class="button" value="<==" />

//右边选中的移植到左边

/**************************************************************************************************/
   //右边的全部移植到左边
   // <input name="add_all" id="add_all" type="button" class="button" value="==>" /> 
	  
/**************************************************************************************************/
//右边双击的 移植到左边
 
/**************************************************************************************************/
  </script>
</html>



答案：

<script type="text/javascript">
  	//<select name="first" size="10" multiple="multiple" class="td3" id="first">
	// <select name="second" size="10" multiple="multiple" class="td3" id="second">
/**************************************************************************************************/	
	//左边选中的移植到右边
	// <input name="add"  id="add" type="button" class="button" value="-->" /> 
		$("#add").click(function(){
			$("#first option:selected").appendTo("#second");
		});
/**************************************************************************************************/
   //左边的全部移植到右边
   // <input name="add_all" id="add_all" type="button" class="button" value="==>" /> 
  		$("#add_all").click(function(){
			$("#first option").appendTo("#second");
		});
	  
/**************************************************************************************************/
//左边双击的 移植到右边
	$("#remove").click(function(){
			$("#second option:selected").appendTo("#first");
	});
//<input name="remove"  id="remove" type="button" class="button" value="<--" />
//<input name="remove_all" id="remove_all" type="button" class="button" value="<==" />

//右边选中的移植到左边
	$("#first").dblclick(function(){
		$("#first option:selected").appendTo("#second");
	});
/**************************************************************************************************/
   //右边的全部移植到左边
   // <input name="add_all" id="add_all" type="button" class="button" value="==>" /> 
  	$("#remove_all").click(function(){
		$("#second option").appendTo($("#first"));
	});
	  
/**************************************************************************************************/
//右边双击的 移植到左边
 	$("#second").dblclick(function(){
		$("#second option:selected").appendTo("#first");
	});
/**************************************************************************************************/
</script>


我叫阿狸猫
关注
专栏目录
jQuery DOM插入节点操作指南
10-24
jQuery的核心特性之一就是DOM操作，包括插入节点的功能，这允许开发者在已有的HTML文档中动态地添加内容。在本篇指南中，我们将详细探讨jQuery提供的各种动态插入节点的方法。 ### 一、append() 方法 `append()`...
DOM节点的内部插入
weixin_44540247的博客
04-07 479
运用jQuery可以让代码写的更精简，那我今天就来介绍几个通过使用封装DOM节点来实现效果的方法，例如：内部插入的方法。 内部插入方法我所知晓的有四种：append()、appendTo()、prepend()、prependTo()。 我将通过上面这个例子来进行说明（注：代码借鉴于老师）。设置了四个button按钮，每个按钮写一个增加元素的方法（以方法名为按钮命名）。 append()方法是向所...
jquery-dom操作内部插入节点
wangjingyi
03-21 162
内部插入是将content插入到selector节点内部，包括内部的头部和尾部。插入后的节点与原节点是[size=large][color=blue][b]父子关系[/b][/color][/size]。 1.[b]append()[/b] 方法在被选元素的结尾（仍然在内部）插入指定内容,向每个匹配的元素内部追加内容. hello [code="jquery"]$("p").ap...
内部插入DOM节点
qq_44543292的博客
04-16 307
作者：赖信武 一、 DOM内部插入append()与appendTo() append(content | fn):向每个匹配的元素内部追加内容。 这个操作与对指定的元素执行append Child方法，将它们添加到文档中的情况类似。 appendTo(content):把所有匹配的元素追加到另一个指定的元素元素集合中。 实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是...
JQuery(内部插入DOM节点)
21号先锋者
02-05 2538
@{ Layout = null; } &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta name="viewport" content="width=device-width" /&gt; &lt;title&gt;ChapterTwoInternal&lt;/title&gt
jquery笔记-内部插入节点
Tech My Life
12-03 1185
JQuery中的DOM操作 内部插入节点 append(content); 向每个匹配的元素的内部结尾处追加内容（相当于主动） $("#company").append($("#rsl")); /*******************************************/ appendTo(content); 将每个匹配的元素追加到指定的元素中的内部结尾处（相当于被动
JQuery插入DOM节点的方法
10-24
JQuery作为一种广泛使用的JavaScript库，提供了大量用于DOM操作的工具函数，其中插入DOM节点的方法尤其重要，因为它让动态地向页面中添加内容变得更加简单和直观。在JQuery中，有多种方法可以实现DOM节点的插入，每...
jQuery学习之DOM节点的插入方法总结
10-20
《jQuery学习之DOM节点的插入方法总结》 在JavaScript的世界里，jQuery库为开发者提供了更加简洁易用的API，使得DOM操作变得简单高效。本文主要聚焦于jQuery中DOM节点的插入方法，帮助开发者掌握如何优雅地在文档中...
jQuery文档操作-DOM插入操作-元素内部
专注
01-02 2111
.append( content [, content]  ) 添加参数指定的内容到每个匹配元素的内部的末尾 .append(content[,content]) .append(function(index,html)) content ① 类型字符串，元素，jQuery DOM元素，HTML字符串，或者jQuery对象来插入到每个匹配元素后面 content ② 类型是字符串，
jQuery的获取焦点和失去焦点事件
07-31 2112
.myClass{ color:#c0c0c0 } 用户名 //为input元素添加样式 $("input").first().addClass("myClass"); //为input元素添加获取焦点事件 $("input").first().focus(function(){ if ($(t
jQuery选中多选框和单选框和下拉框
07-30 1902
Untitled Document 1号 2号 3号 1号 2号 3号 4号 5号 6号 复选1 复选2 复选3 复选4 单选1 单选2 单选3 // $("inp
jQuery的validate验证插件使用方法
08-15 1593
1.导入validate.js文件 注意： *validate.js必须在jQuery.js文件之后导入,因为验证框架里需要用到jQuery.js中定义的方法 *如果先导入jQuery.js再导入validate.js   再次导入jQuery.js也不行。因为验证框架里会将某些方法进行扩展，而后又一次导入jQuery.js会将扩展的方法覆盖。 2.指定要验证的组件 注意：
jQuery内核,以及自定义each和size方法
10-17 1511
jQuery的内核;   (function( window, undefined ) {        //这就是jQuery的原型        var jQuery = function( selector, context ) {            return new jQuery.fn.init( selector, context );        }
jquery获取复选框是否勾选
11-19 1495
$("#test2").unbind("click"); $("#test2").bind("click",function(){ alert($("#check").is(":checked")); }); (":chceked")是表单对象的属性过滤器 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option).
使用jQuery出错的地方
07-31 1366
1.:first和first-child first：匹配找到第一个元素 first-child：匹配第一个子元素 例如：有两个class为one的元素 class是 mini******222 class是 one title="test02" 2222 class是 mini01 cdddddddlass是 mini 当使用firs
jQueryDom操作之删除节点
07-30 1237
删除节点： remove():  从 DOM 中删除所有匹配的元素, 传入的参数用于根据 jQuery 表达式来筛选元素. 当某个节点用 remove() 方法删除后, 该节点所包含的所有后代节点将被同时删除. 这个方法的返回值是一个指向已被删除的节点的引用. empty():  清空节点 – 清空元素中的所有后代节点(不包含属性节点). 练习： ddd
jQuery选择器之过滤选择器之属性过滤选择器
07-29 1207
过滤选择器之属性过滤选择器 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素 1、[attribute] (表示带有attribute属性的元素,attribute不是属性值) 用法: $(”div[id]“) ;  返回值  集合元素 说明: 匹配包含给定属性的元素. 例子中是选取了所有带”id”属性的div标签. 2、[attribute=value] (
jQueryDom操作之查找节点
07-30 1163
查找节点:  查找属性节点: 通过 jQuery 选择器完成. 查找属性节点: 查找到所需要的元素之后, 可以调用 jQuery 对象的 attr() 方法来获取它的各种属性值 练习： ddd div,span{ width: 140px; height: 140px; margin
理解jQuery：DOM操作与节点插入
"jQuery入门教程-理解插入节点与基础概念" jQuery是一个广泛使用的JavaScript库，它的出现极大地简化了JavaScript的DOM操作、事件处理和动画创建。"插入节点"是jQuery中的一项基本技能，允许开发者动态地将新创建的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值