1 动态创建节点


1-1 通过jsp最原生的方法来创建节点

详细说明请查看点击此处查看


<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<title> 这是使用 jquery的第一个案例 </title>
	<style>
		.hh{
			width: 200px;
			height:1 00px;
			padding: 10px;
			margin: 5px;
			float: left;
			border: 2px solid #ccc;
			background: #bbffaa;
		}
	</style>

</head>
<body>
	<h1>动态创建div节点</h1>
<!-- 	创建div标签 并引用 我们定义的样式 -->
	<div class="hh">
		<div class="addDiv">点击页面会动态创建元素节点
		</div>
	</div>
	<script type="text/javascript">
		//从DOM选取元素
		  var body = document.querySelector('body');
		  //为document添加点击事件
		document.addEventListener('click',function(){
			
			//创建两个div
			var div1 = document.createElement('div')
			var div2 = document.createElement("div");
			//设置属性
			div1.setAttribute('class','hh')
			div2.className='addDiv' 
			//向div中添加文本
			div2.innerHTML="动态创建div";
			//设置加入文档,也就是包含关系
			div1.appendChild(div2)
			body.appendChild(div1)
		},false)
	</script>
</body>
</html>


效果图: 1-1


1-2 通过jQuery方法来创建节点


    常用的方法就是通过$(" html 结构 ") 这样的函数结构进行处理


<DOMTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
	<style >
	.div_style{
		width:200px;
		height:100px;
		padding:5px;
		margin:10px;
		float: left;
		border: 2px solid #ccc;
		background: yellow;
	}

	</style>
</head>
<body >

	<div class="div_style">
		<div class="child"> 通过jquery来添加 div
		</div>
	</div>
	
	<script type="text/javascript">
	 var $body = $('body');
	 $body.on('click',function(){
	 	var div = $("<div class='div_style' ><div class='child' >动态创建div </div></div>");
	 	$body.append(div);
	 });
	</script>
	</body>
</html>



 


2 jQuery内部插入append()与appendTo()

   动态创建的元素是不够的,它只是临时存放在内存中,最终我们需要放到页面文档并呈现出来。将创建的元素放到文档上,

   这里就涉及到一个位置关系,常见的就是把这个新创建的元素,当作页面某一个元素的子元素放到其内部。针对这样的处理,jQuery就定义2个操作的方法


append:这个操作与对指定的元素执行原生的appendChild方法,将它们添加到文档中的情况类似。

appendTo:实际上,使用这个方法是颠倒了常规的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中。

2-1 .append()和.appendTo() 方法的不同之处

.append()和.appendTo()两种方法功能相同,主要的不同是语法——内容和目标的位置不同

append()前面是要选择的对象,后面是要在对象内插入的元素内容

appendTo()前面是要插入的元素内容,而后面是要选择的对象

<!DOCTYPE html>
<html>
<head>
<title>addDiv2.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!-- 添加依赖库  -->
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

<style type="text/css">
.content {
	width: 300px;
	height: 100px;
}
/* 通过append方法来添加的节点使用的样式 */
.append {
	background-color: blue;
	margin-top: 10px;
}
/* 通过appendTo方法来添加的节点使用的样式 */
.appendTo {
	background-color: red;
	margin-top: 5px;
}
</style>
</head>

<body>
	This is my HTML page.
	<br>

	<h2>通过append与appendTo添加元素</h2>

	<button id="bt1">点击通过jQuery的append添加元素</button>
	<button id="bt2">点击通过jQuery的appendTo添加元素</button>
	
	<!--  添加div 的位置 -->
	<div class="content"></div>

	<script type="text/javascript">
		$("#bt1").on('click', function() {
			$(".content").append('<div class="append">通过append方法添加的元素</div>');

		});
	</script>

	<script type="text/javascript">
		$("#bt2").on(
				'click',
				function() {
					$('<div class="appendTo">通过appendTo方法添加的元素</div>')
							.appendTo($(".content"));
				});
	</script>
</body>
</html>


效果图 9-1


3 jQuery外部插入after()与before()

  • before与after都是用来对相对选中元素外部增加相邻的兄弟节点

  • 2个方法都是都可以接收HTML字符串,DOM 元素,元素数组,或者jQuery对象,用来插入到集合中每个匹配元素的前面或者后面

  • 2个方法都支持多个参数传递after(div1,div2,....) 可以参考右边案例代码

       注意点:

  • after向元素的后边添加html代码,如果元素后面有元素了,那将后面的元素后移,然后将html代码插入

  • before向元素的前边添加html代码,如果元素前面有元素了,那将前面的元素前移,然后将html代码插



<!DOCTYPE html>
<html>
<head>
<title>addDiv3.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

<!-- 添加依赖库  -->
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>

<style>
	/*点击通过jQuery的before添加元素 显示框 使用样式  */
	.contentBefore {
		border: 2px solid red;
		margin-top: 5px;
	}
	/* 点击通过jQuery的after添加元素 显示区域使用样式 */
	.contentAfter {
		border: 2px solid #e6e6e6;
		margin-top: 5px;
	}
</style>
</head>

<body>
	This is my HTML page.
	<br>
	
	 <h2>通过before与after添加元素</h2>
	 
	 <button id="bt1">点击通过jQuery的before添加元素</button>
     <button id="bt2">点击通过jQuery的after添加元素</button>
     
     <div class="contentBefore">
        <p class="test1">测试before</p>
    </div>
    <div class="contentAfter">
        <p class="test2">测试after</p>
    </div>


	<script type="text/javascript">
		$("#bt1").on(
				'click',
				function() {
					//在匹配test1元素集合中的每个元素前面插入p元素
					$(".test1").before(
							'<p style="color:red">before,在匹配元素之前增加</p>',
							'<p style="color:red">多参数</p>')
				})
	</script>
	<script type="text/javascript">
		$("#bt2").on(
				'click',
				function() {
					//在匹配test1元素集合中的每个元素后面插入p元素
					$(".test2").after(
							'<p style="color:blue">after,在匹配元素之后增加</p>',
							'<p style="color:blue">多参数</p>')

				})
	</script>

</body>
</html>



效果图: 10-1

Center