### 创建节点
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
/*
* 创建节点
$(<>)
比原生JS更强大的创建方式
* */
// document.createElement('div');
// $('<div>'); //这样就创建了一个div标签
/*
var oDiv = document.createElemenet('div');
oDiv.innerHTML = 'hello';
oDiv.id = 'div1';
*/
$(function(){
$('<div id="div1">测试...</div>');
})
</script>
</head>
<body>
</body>
</html>
~~~
***
### 添加节点（剪切操作）
方式1：
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节点的操作</title>
<script src="js/jquery-1.11.1.js" type="text/javascript"></script>
<script>
// append()、prepend()、before()、after()
$(function(){
//append()：把元素添加到指定的节点的里面的最后
var $li = $('<li>hello</li>');
$('ul').append($li);
//prepend()：把元素添加到指定的节点的里面的最前面
$('ul').prepend($li);
//before()：把元素添加到指定的节点的前面
$('ul').before($li);
//after()：把元素添加到指定的节点的后面
$('ul').after($li);
})
</script>
</head>
<body>
<ul>
<li><div>aaa <span>span</span></div></li>
<li><div>aaa <span>span</span></div></li>
<li><div>aaa <span>span</span></div></li>
</ul>
</body>
</html>
~~~
方式2：
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节点的操作</title>
<script src="js/jquery-1.11.1.js"></script>
<script>
$(function(){
var $li = $('<li>hello</li>')
// $('ul').append($li);
// $li.appendTo($('ul'));
$li.prependTo($('ul'));
})
</script>
</head>
<body>
<ul>
<li><div>aaa <span>span</span></div></li>
<li><div>aaa <span>span</span></div></li>
<li><div>aaa <span>span</span></div></li>
</ul>
</body>
</html>
~~~
#### 两种写法的区别
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
$(function(){
var $li = $('<li>hello</li>');
// $('ul').append($li).css('background','red');//整个ul背景变红
$li.appendTo($('ul')).css('background','red');
//记忆技巧：谁调用函数就影响的是谁
//仅指定li背景变红
})
</script>
</head>
<body>
<ul>
<li><div>aaa <span>span</span></div></li>
<li><div>aaa <span>span</span></div></li>
<li><div>aaa <span>span</span></div></li>
</ul>
</body>
</html>
~~~
***
### 删除节点
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
$(function(){
//原生的删除元素的方式
//document.body.removeChild(oDiv);
//jQuery的方法
$('div').remove();
})
</script>
</head>
<body>
<div>div</div>
</body>
</html>
~~~
***
### 克隆节点
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
/*
默认的剪切操作
如何克隆事件(clone函数添加参数true)
*/
$(function(){
// $('div').appendTo($('span')); //默认是剪切操作
$('div').click(function () {
alert(123);
});
var $div = $('div').clone(true);
$div.appendTo($('span'));
//克隆过来的div默认没有原来div的click事件。
//clone()默认是克隆元素结构，而不克隆行为事件。
//clone(true)，参数true就是可以复制之前的操作行为
})
</script>
</head>
<body>
<div>div</div>
<span>span</span>
</body>
</html>
~~~
***
### 插入节点
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
$(function(){
$('input[value=上移]').click(function(){
var $nowLi = $(this).closest('li');
var $preLi = $nowLi.prev();
if($preLi.length == 0){
alert("不能再上移了");
}else{
$nowLi.insertBefore($preLi);
}
});
$('input[value=下移]').click(function(){
var $nowLi = $(this).closest('li');
var $nextLi = $nowLi.next();
if($nextLi.length == 0){
alert("不能再下移了");
}else{
$nowLi.insertAfter($nextLi);
}
});
})
</script>
</head>
<body>
<ul>
<li>1.<input type="button" value="上移"><input type="button" value="下移"></li>
<li>2.<input type="button" value="上移"><input type="button" value="下移"></li>
<li>3.<input type="button" value="上移"><input type="button" value="下移"></li>
<li>4.<input type="button" value="上移"><input type="button" value="下移"></li>
<li>5.<input type="button" value="上移"><input type="button" value="下移"></li>
</ul>
</body>
</html>
~~~
